How to use VueJS data key with space

Question

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.

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. — Lim Socheat
– Lim Socheat, Commented Apr 24, 2018 at 17:05

Sphinx · Accepted Answer · 2018-04-25 00:04:20Z

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>

edited Apr 25, 2018 at 0:04

answered Apr 24, 2018 at 17:12

Sphinx

10.7k2 gold badges36 silver badges50 bronze badges

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

6 Comments

acdcjunior Over a year ago

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

Sphinx Over a year ago

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.

Sphinx Over a year ago

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']

Lim Socheat Over a year ago

Thanks so much. my problem is solved. both $data['test 1'] and this['test 1'] are working for me.

Sphinx Over a year ago

@LimSocheat check this don't use this in template

|

Mohamed Akram · Accepted Answer · 2018-04-24 17:49:44Z

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

answered Apr 24, 2018 at 17:49

Mohamed Akram

2,11716 silver badges22 bronze badges

1 Comment

Lim Socheat Over a year ago

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.

Collectives™ on Stack Overflow

How to use VueJS data key with space

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related