Получить вычисляемое свойство и передать его значение при редактировании другого текстового поля vue.js - PullRequest
0 голосов
/ 06 мая 2019

Я хочу отправить вычисляемое свойство одновременно с редактированием текстового поля, поэтому нет кнопки «сохранить», однако я не могу понять, как получить значение свойства из другого поля или из вычисленных данных для передачи .

Вот мой код, 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>

1 Ответ

0 голосов
/ 08 мая 2019

В конце концов, все было просто, так что изменившийся код сработал, добавив это.

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