Как использовать ключ данных VueJS с пробелом

Question

Я работаю с существующей базой данных, в каждой колонке таблицы которой есть пробелы. В результате, как VueJS api, я получил ключ данных с пробелами, как показано ниже:

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",
}

Моя проблема заключается в том, что когда я пытался использовать 'v-model' => 'Обученный курс' , вся страница компилировала ошибку.

Как мне справиться с этим пробелом в VueJS?

PS. Я не могу удалить пробел, чтобы изменить имя столбца таблицы. потому что это связано со многими отношениями и сторонних приложений.

Answer 1

Использование псевдонимов с запросом Laravel Eloquent для столбцов, в которых есть место, поэтому вам не нужно беспокоиться о внешнем коде,

Кроме того, наличие пробела в столбце - действительно плохой дизайн базы данных, и в итоге вы получитеочень сложные вопросы ..

Answer 2

Не думаю, что это хорошая идея - использовать переменную данных с пробелами. Это усложнит вам жизнь.

Но в любом случае, вы можете получить доступ к / v-модели, используя yourdata[key_name], как показано ниже:

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:

Как сказал автор Vue: это будет изменено в скомпилированном шаблоне в зависимости от области действия функции, в которой вы находитесь.

Так что не используйте это в шаблоне, особенно 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>