Error [Vue warn]: v-bind without argument expects an Object or Array value

Question

Every time I toggle show to true I get error warning:

Error [Vue warn]: v-bind without argument expects an Object or Array value

The Test component does not get correct value for show passed to it as it is always false.

My question is: how can I get rid of the warning and have VUE do what I expect it to do (toggle show and pass it to test when test emits toggle-filter)

const Filter = Vue.component('Test', {
  template: `<div>
    {{show?'true':'false'}}
    <button v-on:click="toggleFilter">toggle</button>
  </div>`,
  props: ['show'],
  methods: {
    toggleFilter(e) {
      this.$emit('toggle-filter', e);
    },
  },
});

const app = new Vue({
  el: '#app',
  //components: {Filter},
  data: {
    show: false,
  },
  methods: {
    toggleFilter() {
      this.show = !this.show;
      console.log('show:',this.show);
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <Test v-bind.show="show" v-on:toggle-filter="toggleFilter"></Test>
    {{show?'true':'false'}}
  </div>
</div>

Kuba Janik · Accepted Answer · 2020-03-24 09:39:27Z

4

You should have v-bind:show instead of v-bind.show.

answered Mar 24, 2020 at 9:39

Kuba Janik

3332 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

HMR Over a year ago

That's it, thank you. Do you know if there are any dev tools/plugins for vscode that allow me to create vue code without having to guess what the syntax is and letting it spit out unhelpful errors during runtime?

HMR Over a year ago

I installed that but doesn't do anything for .html files (it doesn't know they are templates), my vue files look like <template src="./template.html"></template>

Dran Dev Over a year ago

Thank you! This should be accepted as the answer! :)

Collectives™ on Stack Overflow

Error [Vue warn]: v-bind without argument expects an Object or Array value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related