установите значение в <li>tag и обновите свойство: нажмите $ event vue.js

Question

Я пытаюсь обновить props child к parent с помощью on: click $ event.

Я передал данные и $ event от родителя к потомку, как показано ниже. в родительском ;

<v-filter
    :sortTypePrice="sortTypePrice"
    :sortTypeNewest="sortTypeNewest"
    v-on:updatePrice="sortTypePrice = $event"
    v-on:updateDate="sortTypeNewest = $event"
/>


data(){
    return {
        sortTypePrice: "",
        sortTypeNewest: "",
    }
 }

computed: {
  filterArticles(){

      let filteredStates = this.api.filter((article) => {
          return (this.keyword.length === 0 || article.address.includes(this.keyword)) 
      });

      if(this.sortTypePrice == "price") {
          filteredStates = filteredStates.sort((prev, curr) => prev.price1 - curr.price1);
      }
      if(this.sortTypeNewest == 'created_at') {
          filteredStates = filteredStates.sort((prev, curr) => Date.parse(curr.created_at) - Date.parse(prev.created_at));
      }

      return filteredStates;
  },
}

Я получил реквизит и установил обновление $ event. Но мой @click не работает.

у ребенка

<ul>
  <li v-model="sortPrice" @click="updatePrice" :value="price">lowest</li>
  <li v-model="sortDate" @click="updateDate" :value="created_at">newest</li>
</ul>


props:["sortTypePrice", "sortTypeNewest"],
name: "controller",
data(){
    return {
        price: "price",
        created_at: "created_at",
        sortPrice:this.sortTypePrice,
        sortDate:this.sortTypeNewest,
    };
},
methods: {
    updatePrice(e){
        this.$emit("updatePrice", e.target.value)
    },
    updateDate(e){
        this.$emit("updateDate", e.target.value)
    }
}

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

Answer 1

Не следует устанавливать оба значения :value и v-model.Вы можете попробовать

<ul>
  <li @click="$emit('updatePrice', 'price')" :value="price">lowest</li>
  <li @click="$emit('updateDate', 'created_at')" :value="created_at">newest</li>
</ul>

Answer 2

Я считаю, что лучший способ синхронизировать реквизит между родительским и дочерним компонентами:

в родителе:

<!-- notice `sync` modifier -->
<child :foo.sync="val" />

у ребенка:

<input v-model="foo_" />

props: ['foo'],
computed: {

    // create a local proxy for the `foo` prop
    foo_{
        // its value should be the value of the prop
        get(){
            return this.foo
        },

        // when we try to change it we should update the prop instead
        set(val){
            this.$emit('update:foo', val)
        }
    }
}

Теперь в дочернем компоненте вы можете работать с foo_ так же, как с foo. Всякий раз, когда вы пытаетесь изменить его, он обновляет реквизит foo в родительском элементе, а затем синхронизируется, так что foo_ остается равным foo. Например, this.foo_ = 1 составит foo == 1.

Это тот же шаблон, который применяется с директивой v-model. Проверьте .sync Модификатор для лучшего понимания.