进行修改操作的时候 修改的值没有实时改变,该怎么做呢？

Question

<!--父组件-->

 <CategorySelect
                v-model="formData.categoryId"
                :type="0"
              ></CategorySelect>

<!--子组件-->

<template>
  <div>
    <!-- 下拉框 -->
    <el-select
      clearable
      placeholder="请选择分类"
      :modelValue="modelValue"
      @change="onChange"
    >
      <el-option
        :value="item.categoryId"
        :label="item.categoryName"
        v-for="item in categoryList"
      ></el-option>
    </el-select>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, nextTick } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
  modelValue: {
    type: [Number,String],
  },
  type: {
    type: Number,
  },
});

const api = {
  loadCategory: "/category/loadAllCategory4Select",
};

const categoryList = ref([]);

const loadCategory = async () => {
  let result = await proxy.Request({
    url: api.loadCategory,
    params: {
      type: props.type,
    },
  });
  if (!result) {
    return;
  }
  categoryList.value = result.data;
};

loadCategory();

const emit = defineEmits(["update:modelValue", "change"]);
const onChange = (e) => {
  emit("update:modelValue", e);
  emit("change");
};
</script>

进行修改操作的时候 修改的值没有实时改变,该怎么做呢？

进行修改操作的时候 修改的值没有实时改变,该怎么做呢？

Answer 1

:modelValue="modelValue" 这里不应该是 props.modelValue 嘛？
别的地方好像没问题。

搞了个 demo，是联动的

https://stackblitz.com/edit/vitejs-vite-hha5mb?file=src%2FApp.vue,src%2Fstyle.css,src%2Fcomponents%2FHelloWorld.vue&terminal=dev

Answer 2

你所说的 实时改变 是啥意思=。= 是 vue-devtools 里面显示的 formData.categoryId 没有马上更新，还是 watch 了 formData 里面的方法没有触发？