[Vuejs]-Set value to <li> tag and update the prop on:click $event vue.js

by

0👍

✅

You should not set both :value and v-model. You can try

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

0👍

I find the following the best way to sync a prop between parent and child component:

in parent:

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

in child:

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

Now in the child component you can work with the foo_ prop the same way as you would with the foo prop. Whenever you try to change it, it will update the foo prop in the parent and then sync down so that foo_ remains equal to foo. For example this.foo_ = 1 would make foo == 1.

This is the same pattern that is applied with the v-model directive. Check .sync Modifier for better understanding.

Leave a comment