[Vuejs]-In vue，how to reactive another reactive obj?

by

0👍

✅

Try in this way:

<script setup>
import { reactive } from 'vue';
  
const district = [
  {name: "A city",items:["A district","AB district","ABC district"]},  
  {name: "B city",items:["B district","BB district","BBC district"]}
];
const targetCity = reactive({ city: district[0] });
const targetDistirct = reactive({ district: targetCity.city.items[0] });
  
const setFirstDistrictAsDefault = () => {
  targetDistirct.district = targetCity.city.items[0]
}
</script>

<template>
  <select v-model="targetCity.city" @change="setFirstDistrictAsDefault">
    <option v-for="city in district" :value="city" :key="city.name">{{ city.name }}</option>
  </select>
  <select v-model="targetDistirct.district">
    <option v-for="item in targetCity.city.items" :value="item" :key="item">{{ item }}          </option>
  </select>
  <p>
    {{ targetCity.city.name }}<br/>
    {{ targetDistirct.district }}
  </p>
</template>

Leave a comment