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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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/[email protected]/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/[email protected]/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>

Method 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..


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x