@click 調用在 vue.js 中不起作用的方法

Question

幾天以來，我一直在學習 Vue.JS，我只是在嘗試做一個在單擊按鈕時添加芯片的應用程序。 創建的芯片應該將輸入的值作為名稱。 我創建了一個（通常）應該創建這個芯片的方法。 它甚至沒有調用該方法，我不知道為什么，我試圖在方法的開頭 console.log 一些東西來檢查它......

謝謝大家！

我的應用程序.vue：

<template>
  <v-app id="whole_container">
    <v-content id="main_container">
      <v-row id="main_row">
        <v-col class="hellocol" id="chips">
          <customChip name="Louis"></customChip>
        </v-col>
        <v-col class="hellocol" id="chipField">
          <addChip></addChip>
        </v-col>
      </v-row>
    </v-content>
  </v-app>
</template>

<script>
import customChip from './components/chip.vue';
import addChip from './components/addChip.vue';

export default {
  name: 'App',

  components: {
    customChip,
    addChip
  },

  data: () => ({
    //
  }),
};
</script>

我的 AddChip 文件：

<template>
    <div>  
        <v-text-field id="newChip" :outlined="true" label="Entrez un nom" placeholder="Michel" v-model="currentName"></v-text-field>
        <p>Je m'appelle {{ currentName }}</p>
        <chipButton @click="addChip( currentName )"></chipButton>
    </div>
</template>

<script>
import chipButton from './button.vue';

export default {
    data: () => ({
        currentName: ""
    }),
    components: {
        chipButton,
    },
    methods: {
        addChip: function(name) {
            console.log(name);
            let actualChips = document.getElementById('chips');
            let newChip = document.createElement('customChip');
            newChip.name = name;
            actualChips.appendChild('newChip');
        }
    }
}
</script>

Answer 1

您希望針對 chipButton 組件的 HTML 元素的點擊，而不是@click=使用@click.native=來偵聽本機元素而不是組件元素上的事件。

如果你真的需要監聽組件上的click事件，你必須向組件發出該事件（就像事件監聽器在子元素上一樣）：

// chipComponent.vue
<template>
  <div>
    <button @click="$emit('click')">Something</button>
  </div>
</template>

但除非您需要特定的東西，否則我會使用@click.native=指令 go 。

Answer 2

此處的任何模板標簽<chipButton>都已替換為模板內容，因此如果您編寫諸如<chipButton @click="addChip( currentName )">之類的內容，則會將其替換為其模板內容，並且屬性的 rest 將消失。

這是我上面所說的要理解的例子。

 Vue.component('test',{ template:`<div @click="childClick">Click here to check which methods is calling</div>`, methods:{ childClick: function(){ alert('childClick'); } } }) var app = new Vue({ el:'#niklesh', data:{ name:'Niklesh Raut' }, methods:{ parentClick: function(){ alert('parentClick'); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="niklesh"> <test @click="parentClick"></test> </div>

解決方案 1：要么您需要將您的方法放在您的子組件中。

解決方案 2：或者只是用div類的任何標簽結束。

 Vue.component('test',{ template:`<div @click="childClick">Click here to check which methods is calling</div>`, methods:{ childClick: function(){ alert('childClick'); } } }) var app = new Vue({ el:'#niklesh', data:{ name:'Niklesh Raut' }, methods:{ parentClick: function(){ alert('parentClick'); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="niklesh"> <div @click="parentClick"><test></test></div> </div>