代码之家  ›  专栏  ›  技术社区  ›  gespinha

当元素不再可见时,如何更改ref元素?

  •  0
  • gespinha  · 技术社区  · 10 月前

    在我的一个组件中,我有一个窗体,它会根据单选按钮的值更改窗体。

    我的组件看起来像这样:

    <template>
      <div>
        <div>
          <label>
            <input
              class="radio"
              name="groupInput"
              type="radio"
              value="one"
              v-model="groupActive"
            />
            Group 1
          </label>
          <label>
            <input
              class="radio"
              name="groupInput"
              type="radio"
              value="two"
              v-model="groupActive"
            />
            Group 2
          </label>
        </div>
        <input v-if="groupActive === 'one'" type="text" ref="defaultInput" />
        <select v-else ref="defaultInput">
          <option value="red">Red</option>
          <option value="blue">Blue</option>
          <option value="green">Green</option>
        </select>
      </div>
    </template>
    
    <script setup>
    import { ref, onMounted } from "vue";
    
    const groupActive = ref("one");
    const defaultInput = ref(null);
    
    onMounted(() => {
      defaultInput.value.focus();
    });
    </script>
    

    Here's a working example .

    当安装部件时, defaultInput 专注。但当我更改单选按钮的值时 <input> 我关注的是不再可用,我想专注于新的。我怎样才能做到这一点?是否可以更新 ref 新的价值 <select> 然后专注于它?

    1 回复  |  直到 10 月前
        1
  •  0
  •   Unmitigated    10 月前

    您可以使用 onUpdated 以及处理初始安装后的反应状态变化。

    <script setup>
    import { ref, onMounted, onUpdated } from "vue";
    
    const groupActive = ref("one");
    const defaultInput = ref(null);
    
    const focusInput = () => defaultInput.value.focus();
    onMounted(focusInput);
    onUpdated(focusInput);
    </script>