[Vuejs]-Nuxt.js passing prop to component's inner element

by

2👍

✅

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.

👤Bert

Leave a comment