twitter-bootstrap - 两种方式绑定 Bootstrap-Vue 表
问题描述
我正在尝试在bootstrap-vue
表上使用 v-model 使用两种方式的数据绑定。但是表上的值不会随着值的变化而变化。
我尝试使用输入文本更改数据。
<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
值?
解决方案
您应该使用items
prop 而不是v-model
指令:
<b-table striped hover :fields="fields" :items="items"></b-table>
b-table
items 道具是一种绑定方式。
您应该使用 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])
}
}
}
推荐阅读
- c - scanf存储值太长,它读取的第二个值存储两次
- flutter - 缺少静态目标的未实现处理,Flutter
- javascript - React.js 你如何连接来自状态的动态文本
- node.js - 更新到 discord.js v12,无法列出所有公会
- html - 快速路由以提供静态内容目录
- php - 无论出于何种原因,PHP 7.4.4 都不想针对路径 php_mysqli.dll(Windows 10 Server 版本)
- javascript - 单击图像时隐藏图像
- ios - 在 Swift iOS 中将远程 JSON 解码为自定义结构
- json - 在 Bash 中解析 Json 嵌套对象
- rust - 为什么我们在使用 STM32F30x 的嵌入式 RUST 中使用 FLASH.constrain() 和 RCC.constrain()?