使用Vue.js + typescript更改另一div中的文本，使其不再单击列表中的另一项

data() {
  return {
    selectedOption: null, // 初始化选中项为null
  };
}

<div id="app">
  <ul>
    <li v-for="item in items" @click="selectItem(item)" :class="{ selected: item === selectedOption }">
      {{ item }}
    </li>
  </ul>
  <div id="otherDiv">
    {{ selectedOption ? '选中项：' + selectedOption : '请单击列表中的项' }}
  </div>
</div>

methods: {
  selectItem(item) {
    this.selectedOption = item; // 更新选中项
    const otherDiv = document.getElementById('otherDiv');
    if (otherDiv) {
      otherDiv.innerText = item; // 修改另一个div中的文本
    }
  },
},

new Vue({
  el: '#app',
  data() {
    return {
      selectedOption: null,
      items: ['选项1', '选项2', '选项3'], // 假设这是列表中的选项
    };
  },
  methods: {
    selectItem(item) {
      this.selectedOption = item;
      const otherDiv = document.getElementById('otherDiv');
      if (otherDiv) {
        otherDiv.innerText = item;
      }
    },
  },
});