Propsでdataを上書きしたい


#1

v-modelを使っているため初期値が必要だが、propsの値で上書きしたい。

index.vue

<template>
  <div>
    <Hoge v-bind="state" />
    <div v-for="(item, index) in filter" : key="index">
      <button @click="edit(index)"></button>
    </div>
  </div>
</template>

<script>
import Hoge from '~/component/hoge.vue'

export default {
  components: {
    Hoge
  },
  methods: {
    edit(index) {
      const list = this.filter  //リストを返すcomputed
      this.state = list[index]    
    }
  },
  data() {
    return {
      state: {
       id: "",
       title: ""
      }
    }
  }
}

Hoge.vue

<template>
<div v-model="state.id"></div>
</template>

<script>
export default {
  name: 'Hoge',
  props:['state'],
  state: {
    id: "",
    title: ""
  }
}

v-modelはvuesaxというライブラリの仕様上かえれそうにないのでcomponent側のdataをpropsで上書きするかもしくはstore側にすべて保存すべきなのか、、アドバイスお願いします。
やりたいこととしては、カードを押した時にホップアップ用のComponentにクリックされたカードの情報をpropsで渡してホップアップ表示みたいなことがやりたいです。


#2

Propsでデータを上書きするのに、以下のようなことをしています。
WatchでPropの更新をウォッチして、変更があれば内部データを更新するという感じです。

<template>
<div v-model="tmpState.id"></div>
</template>

<script>
export default {
  name: 'Hoge',
  props:['state'],
 data: () => ({
  tmpState: {
    id: "",
    title: ""
  }),
 watch: {
  state: {
    handler: (newValue, oldValue) => {
       this.tmpState = newValue
    },
   immediate: true
  }
 }
}

v-modelはvuesaxというライブラリの仕様上かえれそうにないのでcomponent側のdataをpropsで上書きするかもしくはstore側にすべて保存すべきなのか、、アドバイスお願いします。
やりたいこととしては、カードを押した時にホップアップ用のComponentにクリックされたカードの情報をpropsで渡してホップアップ表示みたいなことがやりたいです。

返信する

ブックマーク シェア 通報 返信する

追跡中

このトピックを購読中なので、新たな返信のカウント数が表示されます。

関連トピック

トピック カテゴリ 返信 閲覧 アクティビティ
Nuxtで、各ページを開いたときに同じ処理を行う方法

nuxt|日本語|0|11|15時間|
|Vue router tag=“li” 触发不了点击事件|中文|0|1|1分|
|热加载突然失效|中文|0|2|1分|
|Vue-cli 3, public folder and backend||1|11|1分|
|Cli3.x版本下 模块的局部样式不是用scoped了吗|中文|2|21|1分|

新規トピック 60つ remaining, or 日本語の他のトピックを読む