在编辑另一个文本字段 vue.js 时获取计算属性并传递其值

Posted 2023-02-23

【中文标题】在编辑另一个文本字段 vue.js 时获取计算属性并传递其值

【英文标题】：Get computed property and pass its value while editing another text field vue.js

【发布时间】：2019-09-23 22:17:51

【问题描述】：

我想在编辑文本字段的同时发送计算属性，因此没有“保存”按钮，但是我不知道如何从另一个字段或计算数据中获取属性值以传递.

这是我目前的代码，activeNote.id 可以在模板中查看没有问题，但我想在输入文本区域时传递它的值

<template>
  <div class="editor">
    <form id="editForm">
      <h2>Edit</h2>
      <button @click="closeEdit()">Close</button>
      <textarea
        v-bind:value="activeNote.text"
        @input="editNote"
        class="form-control"
      ></textarea>
      <input v-bind:value="activeNote.id" name="id" readonly />
    </form>
  </div>
</template>

<script>
import  mapState  from 'vuex'

export default 
  methods: 
    // not sure this is best practice to dispatch from here
    editNote(e) 
      this.$store.dispatch('editNote', e)
       // activeNote.id doesnt work here unfortunatly
      this.$store.dispatch('noteId', activeNote.id)
      //console.log(activeNote.id)
    
    closeEdit() 
      //console.log('emitclose')
      this.$emit('closeEdit')
    
  ,
  computed: mapState(
    activeNote: state => state.activeNote
  )

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

【问题讨论】：

使用v-model 代替v-bind:value + @input="editNote" 是不必要的。

很抱歉，但这只会阻止更新发生并且不会解决传递第二个值的问题，我没有使用按钮来触发捕获输入

它应该可以工作，因为mapState 是双向反应的。如果您坚持使用editNote，则应将activeNote.id 更改为this.activeNote.id，加上除非您正在执行异步操作，否则您应该使用mutation 来更新它，而不是action。

更新是实时跨设备。你是说改变这个。在模板部分还是脚本部分？

在您的 editNote 方法中

【参考方案1】：

最后很简单，所以修改后的代码可以工作，添加这个。

<template>
  <div class="editor">
    <form id="editForm">
      <h2>Edit</h2>
      <button @click="closeEdit()">Close</button>
      <textarea
        v-model="activeNote.text"
        @input="editNote"
        class="form-control"
      ></textarea>
      <input v-bind:value="activeNote.id" name="id" readonly />
    </form>
  </div>
</template>

<script>
import  mapState  from 'vuex'

export default 
  methods: 
    editNote(e) 
      this.$store.dispatch('editNote', e)
      this.$store.dispatch('noteId', this.activeNote.id)
    ,
    closeEdit() 
      this.$emit('closeEdit')
    
  ,
  computed: mapState(
    activeNote: state => state.activeNote
  )

</script>