Двусторонняя Привязка Bootstrap-Vue Таблиц
Я пытаюсь использовать двустороннюю привязку данных с помощью v-модели в bootstrap-vue
. Но значение в таблице не изменяется при изменении значения.
Я пытаюсь изменить данные с помощью входного текста.
<template>
<b-table striped hover :items="items" :fields="fields" v-model="items"></b-table>
<span>The Value: {{value}} </span>
<b-form-input v-model="value"></b-form-input>
</template>
<script>
export default {
data() {
return {
value = '',
fields: ['field', 'value',],
items: [
{ field: 'Field of Value', value: this.value},
]
}
}
}
</script>
данное значение из ввода формы изменяет текст диапазона, но не изменяет b-table
?
У вопроса есть решение - Посмотреть?

Источник

@thibautg у вас есть идея, как это работает?
Источник

Источник

Могу я спросить, что вы пытаетесь сделать? Для меня это действительно не имеет смысла использовать таблицу, если у вас есть только один элемент
Источник

@Hiws это не один элемент больше похож на попытку создать таблицу с ответом от веб-службы, каждое изменение ввода он делает запрос от restful веб-службы и возвращает ряд данных. Я сделал это одним пунктом, чтобы упростить вопрос.
Источник
Ответы - Двусторонняя Привязка Bootstrap-Vue Таблиц / Two Way Binding Bootstrap-Vue Tables
Является ответом!

15.09.2019 07:24:12
Вы должны использовать items
prop вместо v-model
:
<b-table striped hover :fields="fields" :items="items"></b-table>
b-table
элементов prop является одним из способов привязки.
Вы должны использовать свойство watch, чтобы сделать это реактивным :
export default {
data() {
return {
value = '',
fields: ['field', 'value',],
items: [
{ field: 'Field of Value', value: this.value},
]
}
},
watch:{
value(newVal){
this.items[0].value=this.value;
this.$set(this.items,0,this.items[0])
}
}
}

Это дает ошибку компиляции, так как я использую :items="items" в течение двух раз.

ах ок, я сделал ошибку, дублируя пункты проп

О да. Но, к сожалению, <b-table striped="" hover="" :fields="fields" :items="items"></b-table> не работает. Это ничего не меняет.

пожалуйста, проверьте мой отредактированный ответ

Спасибо за ваш ответ, но где вы cal value (newVal) функция?

это означает, что вы наблюдаете любое изменение в свойстве value, а затем продолжаете, если есть какие-либо изменения

Это на тебя действует? Я должен делать что-то работать.

Спасибо, это действительно работает.
Помочь в развитии проекта: