[Vuejs]-How to use VueJS data key with space

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

👤Sphinx