0

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
  • yes, the whitespace of the key is my issue. Example, I want to access to key name: Course Trained via v-model. the whole page will compile error. Commented Apr 24, 2018 at 17:05

2 Answers 2

6

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>

Sign up to request clarification or add additional context in comments.

6 Comments

Yes, +1, and if 'test name' is in the root, the OP could use <input v-model="$data['test name']"> as well (though it is much better to nest it in a property like you do in this demo).
thanks for your suggestions, updated my answer. Actually I am trying v-model="this['test name']", but it will cause the data can't get the update. I am googling it, but no helpfull information is found.. do you know what is the difference $data['test 1'] and this['test 1']. Maybe have to look into vue source code to see how to implement v-model.
what I thought is we can access data in method or computed like this.test, that is why my first thought is using this['test']. If change <h2>{{$data['test 1']}}</h2> to <input v-model="this['test 1']">, it seems work, but actually if change the value of input, it will not get the update. it seems the input bind one value which is one clone from $data['test 1']
Thanks so much. my problem is solved. both $data['test 1'] and this['test 1'] are working for me.
@LimSocheat check this don't use this in template
|
1

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

1 Comment

Thanks so much, that can be the optional way to do because there are thousand of table columns which I cannot keep aliasing every columns. Because I am working on existed database that designed by someone else, so I cannot make any change to columns name.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.