vue列表某个属性需要ajax请求后翻译

一开始翻译，打算直接用methods，但是有异步，不能直接return出来，后来发现用命令，直接更改当前值，避免了return

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <span v-translate="item.text">{{ item.text }}</span>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'apple' },
        { id: 2, text: 'banana' },
        // ... 更多项
      ]
    };
  },
  directives: {
    translate: {
      inserted(el, binding) {
        // 假设有一个translate方法来处理翻译
        translate(binding.value).then(translatedText => {
          el.innerText = translatedText;
        });
      }
    }
  }
};
 
// 假设的translate函数，使用Promise模拟AJAX请求
function translate(text) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 这里模拟是AJAX请求翻译接口
      const translatedText = 'translated-' + text;
      resolve(translatedText);
    }, 1000);
  });
}
</script>