Saya mencoba memperbarui props child ke parent dengan on:click $event.

Saya meneruskan data dan $event ke parent to child, seperti di bawah ini. di induk;

<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;
  },
}

Saya mendapatkan alat peraga dan mengatur pembaruan $event. Tapi @klik saya tidak berfungsi.

pada anak

<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)
    }
}

Saya pikir, saya menggunakan cara yang sangat salah untuk melakukan ini. jika demikian, apa cara yang tepat untuk mencapai ini?

0
user10753862 29 Mei 2019, 10:59

2 jawaban

Jawaban Terbaik

Anda tidak boleh menyetel :value dan v-model. Anda dapat mencoba

<ul>
  <li @click="$emit('updatePrice', 'price')" :value="price">lowest</li>
  <li @click="$emit('updateDate', 'created_at')" :value="created_at">newest</li>
</ul>
0
ittus 29 Mei 2019, 09:02

Saya menemukan cara terbaik berikut untuk menyinkronkan prop antara komponen induk dan anak:

Pada orang tua:

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

Pada anak:

<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)
        }
    }
}

Sekarang di komponen anak Anda dapat bekerja dengan prop foo_ dengan cara yang sama seperti yang Anda lakukan dengan prop foo. Setiap kali Anda mencoba mengubahnya, itu akan memperbarui prop foo di induk dan kemudian disinkronkan sehingga foo_ tetap sama dengan foo. Misalnya this.foo_ = 1 akan membuat foo == 1.

Ini adalah pola yang sama yang diterapkan dengan direktif v-model. Lihat .sync Modifier untuk pemahaman yang lebih baik.

0
Slim 29 Mei 2019, 08:50