Question

当我调用getValue函数时。什么也没发生，数据属性“名称”被传递给模板，因此数据绑定存在。我不确定为什么这行不通，因为我的语法与文档相同。

有人有什么建议吗？

谢谢

      <div id = "wrapper">
        <div class = "speech-wrapper">
        <div class = "speech-bubble"> 
          <h3>Tell me what you love</h3> 
        </div>
        </div>

        <div id = "selections-container">
          <div class = "selection-item">1</div>
          <div class = "selection-item">2</div>
          <div class = "selection-item">3</div>
          <div class = "selection-item">4</div>
          <div class = "selection-item">5</div>
          <div class = "selection-item">6</div>
          <div class = "selection-item">7</div>
          <div class = "selection-item">8</div>
        </div>
      </div>

      <div class = "button-wrap">
        <button id = "get-listings" v-on:click = "getValue"> {{name}</button>
  </div>
  </div> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: "test",  
    }
  },
  methods: {
    getValue: function() {
     console.log("you clicked me"); 
    }
  }
}
</script>

Answer 1

用作独立组件时，不会发生您描述的问题。您的问题必须出在上面没有显示的代码中的其他地方。

Vue.component('sample', {
  template: '<button id="get-listings" v-on:click="getValue">{{name}}</button>',
  data() {
    return {
      name: 'foo',
    };
  },
  methods: {
    getValue() {
      console.log('get value');
    }
  }
});

var vm = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
  <sample></sample>
</div>

Vue JS方法未触发

1 个答案: