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 ponent 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 = Vueponent('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',
  //ponents: {Filter},
  data: {
    show: false,
  },
  methods: {
    toggleFilter() {
      this.show = !this.show;
      console.log('show:',this.show);
    },
  },
});

<script src=".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>

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 ponent 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.ponent('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',
  //ponents: {Filter},
  data: {
    show: false,
  },
  methods: {
    toggleFilter() {
      this.show = !this.show;
      console.log('show:',this.show);
    },
  },
});

<script src="https://cdnjs.cloudflare./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>

• javascript
• vuejs2

1 Answer 1

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