Question

Vue的新手，我有一个v-data-table，其中有一列我想更新但不知道如何更新！我可以传递任何/所有属性值，但似乎无法弄清楚用户更改后如何传递更新的文本。

当此列有多行时，如何获得该值？我可以在一个字段中执行此操作，但这是在具有许多行的表中。

这是专栏

<td>
  <v-text-field 
   v-model="props.item.productAnnotation" 
   // how do I pass the new text into the first parameter?
   @input="inputAnnotation(??????, props.item.id)" 
   :disabled="!editMode" 
   :readonly="!editMode">
  </v-text-field>
</td>

这是方法

inputAnnotation(text, recordProductId) {
  axios.patch('/api/RecordProducts/' + recordProductId, [{
    'op': 'replace',
    'path': '/annotation',
    'value': text
  }]).then(function(response) {
    // Show response
    console.log(response);
  }).catch(function(error) {
    // Show error
    console.log(error);
  })
},

Answer 1

尝试（取决于来源）

@input="inputAnnotation($event.target.value, props.item.id)"

或

@input="inputAnnotation($event, props.item.id)"

还要删除您的v模型，并用绑定替换它以设置值

:value='props.item.productAnnotation'

$event包含与发出的消息input一起发送的数据。

v-model会通过将值分配给data属性来为您处理。 v模型只是将:value和@input连接到一个公共属性的糖，并且可以处理一些额外的边缘情况。

简而言之，v-model创建一个v-bind:value并将更改从其绑定数据发送到子组件的value属性。然后，它创建@input并侦听要发出的事件。收到后，它将更新属性。这样做是为了使父母可以own the data。子级无法更新该属性，因此必须发出事件以供父级更改。看起来很奇怪，它创建了一个非常干净的体系结构，其中只有所有者可以更新值。这是Vue的核心租户之一。

如何更新vue.js v-data-table并使用新文本更新列值

1 个答案: