How to use VueJS data key with space

问题

I am working with existed Database which every table columns are containing white space. As result as VueJS api, I got the data key with white-space as below:

data = {
Course Trained:"82",
Course trained 2:null,
Delivery Channel:"IA2DC1",
End Date:"2017-05-06",
Full Name:"9",
ID:"1",
Intervention:"IA2",
Number of sessions:"5",
Start Date:"2017-05-02",
Training Orginisation:"2",
}

My problem is when I tried to use 'v-model' => 'Course Trained', the whole page compiled an error.

How can I deal with this with-space in VueJS?

PS. I cannot remove space to change the table column name. because it linked to many relationship and 3rd party application.

回答1:

I don't think it is a good idea using data variable with spaces. It will make you life complicated.

But anyway, you can access/v-model it using yourdata[key_name] like below:

app = new Vue({
  el: "#app",
  data: {
    test: { //if not root
      'test name': "Cat in Boots"
    },
    'test 1': 'Snow White' // if root
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    <h2>{{test['test name']}}</h2>
    <input v-model="test['test name']">
    <h2>{{$data['test 1']}}</h2>
    <input v-model="$data['test 1']">
</div>

EDIT:

As the author of Vue said: this will be changed in the compiled template depending on the function scope you are in.

So don't use this in the template, especially v-model.

app = new Vue({
  el: "#app",
  data: {
    'test 1': 'Cat in Boots'
  }
})

a {
  color:red;
  font-weight:bold;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    <h2>{{this['test 1']}}</h2>
    <input v-model="this['test 1']"> <a>If using `this`, you will find v-model not working as expected</a>
</div>

回答2:

Use allias with Laravel Eloquent query for column which have space, so you donot have to bother in the front end code,

Also having space in column, is really a poor database design and you will end up very complicated issues..

来源：https://stackoverflow.com/questions/50007056/how-to-use-vuejs-data-key-with-space

标签

laravel

Vue.js

vue-component

vue-router