vue3如何将异步获取的后端返回值在前端页面显示？

Question

async searchLocation() {      try {        const response = await axios.get('http://localhost:29999/selectLocationByNumber/'+this.inputValue);        console.log(response.data);        this.number = response.data.number;        this.location = response.data.location;      } catch (error) {        // 处理请求错误        console.error('Error fetching data:', error);      }    },

<script>export default {data() {    return {number:'',      location:'',}  }}</script>

<el-table>          <el-table-column label="号码">{{ number }}</el-table-column>          <el-table-column label="所属运营商">{{ location }}</el-table-column>        </el-table>

异步方法向后端发送请求，得到返回值response，number和location在页面上显示不出来？不会vue

Answer 1

在Vue 3中，您需要在searchLocation方法中更新您的数据的属性值。您正在将数据赋值给this.number和this.location，但这些属性在Vue实例中并没有被定义为响应式数据。因此，当您尝试在模板中渲染这些属性时，Vue无法检测到这些属性的变化，也就不会更新视图。

您需要使用Vue的defineExpose方法来将这些属性定义为响应式数据。下面是一个示例：

<script>export default {  data() {    return {      number: '',      location: '',    }  },  setup() {    const props = defineProps({      inputValue: String,    })    const number = ref(null)    const location = ref(null)    const searchLocation = async () => {      try {        const response = await axios.get('http://localhost:29999/selectLocationByNumber/'+props.inputValue);        console.log(response.data);        number.value = response.data.number;        location.value = response.data.location;      } catch (error) {        // 处理请求错误        console.error('Error fetching data:', error);      }    }    defineExpose({      number,      location,    })    onMounted(searchLocation)  },}</script>

在这个示例中，我们使用了Vue 3的Composition API，特别是defineProps，ref和onMounted。我们使用ref创建了响应式的number和location引用，并在获取数据后更新这些引用的值。然后，我们使用defineExpose将这些引用公开，这样就可以在模板中使用它们。最后，我们使用onMounted钩子在组件挂载后立即调用searchLocation方法。

在模板中，您可以直接使用这些响应式数据，就像它们是普通的数据一样。Vue会自动跟踪这些引用的变化，并更新相应的视图。

注意：Vue3的Composition API需要Vue3.10版本或更高版本才能使用。如果你的Vue版本低于3.10，可能需要升级你的Vue版本或者寻找其他解决方案。