Vue中如何在v-model中使用动态计算属性实现数组与字符串双向绑定？

问题描述 #

我有如下响应式数据：

const entries = ref([{scopes: ["a", "b"]}])

需要遍历entries，为每个条目的scopes数组字段生成输入框，实现空格分隔字符串和数组的双向绑定。

我写了一个辅助转换函数：

function computedScopes(scopes: Ref<string[]>): WritableComputedRef<string> {
  return computed({
    get() {
      return scopes.value.join(" ")
    },
    set(value) {
      scopes.value = value.split(" ")
    },
  })
}

然后在模板中尝试直接调用这个函数绑定v-model：

<template v-for="(entry, i) in entries" :key="i">
  <input type="text" v-model="computedScopes(entry.scopes)" />
</template>

但触发了错误：

v-model value must be a valid JavaScript member expression

可行解决方案 #

方案1：封装独立组件（推荐） #

把输入框和转换逻辑封装成组件，符合Vue组件化最佳实践，逻辑清晰且可复用：

子组件：ScopeInput.vue

<template>
  <input type="text" v-model="localScopes" />
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 定义接收的props
const props = defineProps<{
  modelValue: string[]
}>()

// 定义触发的更新事件
const emit = defineEmits<{
  'update:modelValue': [value: string[]]
}>()

// 定义双向绑定的计算属性，处理数组与字符串的转换
const localScopes = computed({
  get() {
    return props.modelValue.join(' ')
  },
  set(value: string) {
    // 分割后过滤空字符串，避免输入多个空格产生空元素
    emit('update:modelValue', value.split(' ').filter(Boolean))
  }
})
</script>

父组件中使用

<template>
  <template v-for="(entry, index) in entries" :key="index">
    <ScopeInput v-model="entry.scopes" />
  </template>
</template>

方案2：动态创建并缓存计算属性 #

如果不想封装组件，可以在父组件中为每个条目创建对应的计算属性并缓存，避免重复创建：

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'

const entries = ref([{scopes: ["a", "b"]}])

// 用Map缓存每个条目对应的计算属性
const scopeComputedCache = reactive(new Map())

// 获取或创建对应条目的计算属性
const getScopeComputed = (entry: { scopes: string[] }) => {
  if (!scopeComputedCache.has(entry)) {
    const computedRef = computed({
      get() {
        return entry.scopes.join(' ')
      },
      set(value: string) {
        entry.scopes = value.split(' ').filter(Boolean)
      }
    })
    scopeComputedCache.set(entry, computedRef)
  }
  return scopeComputedCache.get(entry)
}
</script>

<template>
  <template v-for="entry in entries" :key="entry">
    <input type="text" v-model="getScopeComputed(entry)" />
  </template>
</template>

这里建议用entry作为key（如果条目是唯一引用），比数组索引更稳定，避免DOM复用问题。

方案3：自定义指令实现转换 #

通过自定义指令直接处理输入框和数组的双向绑定逻辑：

<script setup lang="ts">
import { ref, directive } from 'vue'

const entries = ref([{scopes: ["a", "b"]}])

// 自定义指令v-scope-input
const vScopeInput = directive({
  mounted(el, binding) {
    // 初始化输入框显示值
    el.value = binding.value.join(' ')
    
    // 监听输入事件，更新数组
    el.addEventListener('input', () => {
      const newScopes = el.value.split(' ').filter(Boolean)
      // 替换数组内容，保持响应式
      binding.value.splice(0, binding.value.length, ...newScopes)
    })
    
    // 监听数组变化，更新输入框
    const observer = new MutationObserver(() => {
      el.value = binding.value.join(' ')
    })
    observer.observe(binding.value, { childList: true })
    // 保存观察者实例，销毁时清理
    el._observer = observer
  },
  unmounted(el) {
    el._observer?.disconnect()
  }
})
</script>

<template>
  <template v-for="(entry, index) in entries" :key="index">
    <input type="text" v-scope-input="entry.scopes" />
  </template>
</template>

内容的提问来源于stack exchange，提问作者Mitar