利用计算属性控制展示文本

主要写的是计算属性

在页面中使用条件渲染指令 v-if 或者 v-show 来根据接口返回数据的状态来决定是否展示“生成失败”这个文本。具体的实现方法如下：

在页面中添加要展示失败信息的位置：

<template>
  <div>
    

    
    <div v-if="isFailed">
      生成失败
    div>
  div>
template>

在 Vue.js 的 data 方法中定义一个变量来存储接口返回的状态，并且设置一个计算属性 isFailed, 来根据状态,来计算是否需要展示“生成失败”这个文本：

data() {
  return {
    // 用于存储接口返回的状态
    status: '',
  };
},
computed: {
  // 计算属性，根据接口返回的状态来计算是否需要展示“生成失败”这个文本
  isFailed() {
    return this.status === 'failed';
  },
},

在接口请求中获取接口返回的状态，并将状态存储到 status 变量中：

// 发送接口请求
axios.post('/your-api-url', data)
  .then(response => {
    // 处理接口返回数据
    // ...

    // 获取接口返回的状态，并将状态存储到 status 变量中
    this.status = response.data.status;
  })
  .catch(error => {
    // 接口请求失败
    console.log(error);
  });

上面的代码中，我们使用了 Vue.js 的计算属性来根据接口返回的状态来计算是否需要展示“生成失败”这个文本。

在接口请求成功后，我们将接口返回的状态存储到 status 变量中，并在计算属性 isFailed 中根据status 的值来计算是否需要展示“生成失败”这个文本。

需要注意的是，我们在 isFailed 计算属性中使用了v-if="isFailed"来控制是否展示“生成失败”这个文本，而不是直接使用 v-if="status === 'failed'"。

这是因为 isFailed 计算属性会在 status 变量发生改变时自动重新计算，从而更新页面中的数据，而直接使用 status === 'failed' 则需要手动触发重新渲染才能更新页面中的数据。