[vue/valid-v-bind-sync] .sync modifiers aren t supported on <progress> non Vue-components.eslint-plugin-vue

这是一个 ESLint 的错误提示，它提示你在使用 Vue.js 的模板语法中，给非 Vue 组件的属性使用了 `.sync` 修饰符。修饰符 `.sync` 只能用于 Vue 组件的属性中，以便在子组件中修改父组件的数据时使用。

根据错误提示信息，你在一个非 Vue 组件 `<progress>` 上使用了 `.sync` 修饰符，而修饰符 `.sync` 只能用在 Vue 组件的属性上。你需要去掉这个修饰符，或者将这个元素改成 Vue 组件，才可以解决这个问题。

相关问题

'v-model' directives aren't supported on <div> elements vue/valid-v-model

这个错误通常在 Vue.js 中使用错误的元素上使用 `v-model` 指令时触发。`v-model` 只能用于表单元素（比如 `<input>`、`<select>`、`<textarea>` 等），而不能直接用于 `<div>` 元素。

如果您想在非表单元素上实现类似的双向绑定功能，可以考虑以下两种方式：

1. 使用自定义组件：创建一个包装 `<div>` 元素的自定义组件，并在组件内部实现双向绑定逻辑。这样，您可以在自定义组件上使用 `v-model`。

2. 使用计算属性和事件监听：在父组件中维护一个变量，通过计算属性获取和设置 `<div>` 的值，并通过事件监听更新该变量的值。例如：

<template>
  <div @input="updateValue">{{ value }}</div>
</template>

<script>
export default {
  data() {
    return {
      value: 'Initial value'
    };
  },
  methods: {
    updateValue(event) {
      this.value = event.target.innerText;
    }
  }
};
</script>

以上是两种常见的解决方案，具体选择哪一种取决于您的需求和项目结构。记得将 `v-model` 用于适用的表单元素，以避免该错误。

[vue/valid-v-for] Custom elements in iteration require 'v-bind:key' directives.eslint-plugin-vue

这是一个ESLint报错，提示我们在使用v-for循环渲染自定义组件时，需要添加v-bind:key指令来指定每个子元素的唯一标识符。

在Vue中，使用v-for指令循环渲染列表时，需要为每个子元素指定一个唯一的key值，以便Vue能够准确地判断每个子元素的变化情况，从而进行高效的DOM操作。

当我们使用v-for循环渲染自定义组件时，同样需要为每个子组件指定一个唯一的key值，否则会出现类似于“重复渲染”、“无法更新”等问题。

例如，以下是一个使用v-for循环渲染自定义组件的示例：

<template>
  <div>
    <my-custom-component v-for="item in items" :key="item.id" :data="item" />
  </div>
</template>

在这个示例中，我们为my-custom-component组件添加了v-for指令，循环渲染了items数组中的每个元素，并使用:key指令为每个子组件指定了一个唯一的id值。

通过这样的方式，我们就可以避免类似于eslint-plugin-vue报错的问题，同时也可以保证组件的更新和渲染效率。