Question

我想在编辑文本字段的同时发送计算所得的属性，因此没有“保存”按钮，但是我无法弄清楚如何从另一个字段或计算数据中获取属性值以进行传递

到目前为止，这是我的代码，可以在模板中查看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>

Answer 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>

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

1 个答案: