Vue 3中v-model无法更新数组内值的问题求助

首先看你给出的静态示例代码，最直接的问题是input标签的属性拼写错误：把type写成了tpe，这会导致浏览器无法识别输入框类型，直接影响v-model的双向绑定功能。

修正后的静态示例代码 #

<script setup lang="ts">
import { ref } from 'vue'
// 用ref包裹数组，确保数组本身的变更（比如新增/删除元素）也能触发响应式更新
let ingredienti = ref<{ nome: string, value: number }[]>([
    { "nome": "frist", value: 1 },
    { "nome": "second", value: 2 },
]) 
</script>
  
<template>
    <div>
        <p>
            <!-- 修正type拼写错误 -->
            <input type="text" v-model="ingredienti[0].nome" />
        </p>
        <p>Value is: {{ ingredienti[0].nome }}</p>
        <p>
            <input type="text" v-model="ingredienti[1].nome" />
        </p>
        <p>Value is: {{ ingredienti[1].nome }}</p>
    </div>
</template>

结合Supabase的完整实现方案 #

在实际从Supabase拉取数据、编辑并保存的场景中，除了修正拼写问题，还要确保数据的响应式处理和正确的数据库交互逻辑：

1. 初始化Supabase（假设已配置环境变量） #

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY
const supabase = createClient(supabaseUrl, supabaseKey)

2. 响应式获取数据库数据 #

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { supabase } from './supabase'

// 用ref包裹数组，保证数据变更能触发视图更新
const ingredienti = ref<{ id: string, nome: string, value: number }[]>([])

// 从Supabase拉取数据
async function fetchIngredienti() {
  const { data, error } = await supabase
    .from('ingredienti')
    .select('*')
  
  if (error) console.error(error)
  else ingredienti.value = data || []
}

onMounted(() => {
  fetchIngredienti()
})
</script>

3. 用v-for渲染可编辑列表 #

<template>
  <div class="ingredient-list">
    <div v-for="item in ingredienti" :key="item.id" class="ingredient-item">
      <input type="text" v-model="item.nome" placeholder="输入名称" />
      <input type="number" v-model.number="item.value" placeholder="输入数值" />
      <button @click="saveItem(item)">保存修改</button>
    </div>
  </div>
</template>

4. 将更新保存回Supabase #

// 在<script setup>中添加保存函数
async function saveItem(item: { id: string, nome: string, value: number }) {
  const { error } = await supabase
    .from('ingredienti')
    .update({ nome: item.nome, value: item.value })
    .eq('id', item.id)
  
  if (error) console.error('保存失败:', error)
  else alert('保存成功')
}

关键注意事项 #

• 响应式处理：必须用ref或reactive包裹从Supabase获取的数组，否则数组或对象属性的变更无法触发视图更新。
• v-for的key：必须使用数据库返回的唯一id作为key，避免渲染时出现复用错误。
• 类型安全：用TypeScript定义数据类型，提前规避类型错误。
• 错误处理：在Supabase请求中添加错误捕获，方便排查数据交互问题。

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