CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.js
WraithLux
WraithLux

Reputation: 699

nuxt.js passing prop to component's inner element

I have a simple component:

<template>
    <div id="search__index_search-form">
        <input :foo-id="fooId" @keyup.enter="findFoos()" type="text" :value="keyword" @input="updateKeyword"
               placeholder="Search for a foo">
        <button @click="findFoos()">Search!</button>
        {{fooId}}
    </div>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        computed: mapState({
            keyword: state => state.search.keyword
        }),
        data: function () {
            return {fooId: "all"};
        },
        methods: {
            updateKeyword(e) {
                this.$store.commit("setSearchKeyword", e.target.value);
            },
            findFoos() {
                this.$store.dispatch("findFoos");
            }
        }
    };
</script>

I am calling it from nuxt page:

<template>
    <searchbar v-bind:fooId="500"/>
</template>
<script>
    import searchBar from "~/components/search-bar.vue";

    export default {
        components: {
            'searchbar': searchBar
        }
    };
</script>

This results in:

<div id="search__index_search-form" fooid="500"><input shop-id="all" type="text" placeholder="Search for a foo"><button>Search!</button>
      all
</div>

Question is, why is fooId bound to "div.search__index_search-form" and not to input? And how come {{fooId}} results in "all" (default state), and not "500"?

Upvotes: 0

Views: 5094

Answers (1)

Bert
Bert

Reputation: 82439

fooId is rendered on div#search__index_search-form because you do not declare fooId as a property of the component. Vue's default behavior is to render undeclared properties on the root element of the component.

You need to declare fooId as a property.

 export default {
    props: {
      fooId: {type: String, default: "all"}
    },
    computed: mapState({
        keyword: state => state.search.keyword
    }),
    methods: {
        updateKeyword(e) {
            this.$store.commit("setSearchKeyword", e.target.value);
        },
        findProducts() {
            this.$store.dispatch("findFoos");
        }
    }
};

I'm not sure what you are really trying to accomplish though.

<input :foo-id="fooId" ... >

That bit of code doesn't seem to make any sense.

Upvotes: 2

Related Questions