I've created a basic component:
<template>
<div id="search__index_search-form">
<input :bar-id="barId" @keyup.enter="findBars()" type="text" :value="keyword" @input="updateKeyword"
placeholder="Search for a bar">
<button @click="findBars()">Search!</button>
{{barId}}
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
computed: mapState({
keyword: state => state.search.keyword
}),
data: function () {
return {barId: "all"};
},
methods: {
updateKeyword(e) {
this.$store.commit("setSearchKeyword", e.target.value);
},
findBars() {
this.$store.dispatch("findBars");
}
}
};
</script>
I am using it on a nuxt page like so:
<template>
<custombar v-bind:barId="500"/>
</template>
<script>
import customBar from "~/components/custom-bar.vue";
export default {
components: {
'custombar': customBar
}
};
</script>
After rendering, I'm seeing:
<div id="search__index_search-form" barid="500"><input shop-id="all" type="text" placeholder="Search for a bar"><button>Search!</button>
all
</div>
Why is the barId attribute bound to the "div.search__index_search-form" instead of the input? And how come {{barId}} displays "all" (default value), and not "500"?