如何防止Vue.js在asyncData之后触发元素上的输入事件

Question

我有问题。我使用asyncData方法接收产品数据。包含名称的文本输入元素具有一个@input事件侦听器，因此当名称更改时，将向API发送一个请求以编辑产品。

很遗憾，@input返回名称后触发了asyncData事件。因此，当我刷新页面时，总是发送请求。有什么办法可以解决这个问题？

在asyncData中，我得到产品名称：

asyncData(context) {
    const slug = context.params.slug;

    return context.app.$axios.get(process.env.apiUrl + '/api/v1/features/' + slug)
        .then((response) => {
            const featureData = response.data.data;

            return {
                feature: {
                    name: featureData.name,
                }
            }
        })
        .catch((error) => {
            return context.redirect('/admin/features');
        })
}

如果我在包含名称的元素上添加@input事件监听器：

<b-form-input @input="editFeature('name', feature.name, 'name')" 
              id="name" 
              type="text"
              v-model="feature.name"
              placeholder="Enter a name"
              required >
</b-form-input>

刷新页面时，总是会触发editFeature方法。由于asyncData返回了名称，因此其值也发生了变化，因此触发了@input事件。