骨骼惊奇人 2022-05-15 21:23 采纳率: 50%
浏览 516
已结题

vue3 ref响应数据得不到变化

从后端拿数据做柱形图 response是正常的 在vue中设置ref响应数据总是没有变化 代码如下

问题相关代码,请勿粘贴截图
 <div class="schart-box">
        <div class="content-title">柱状图</div>
        <schart class="schart" canvasId="bar" :options="options1"></schart>
      </div>


  name: "basecharts",
  components: {
    Schart,
  },
  setup() {
    // const state = reactive({
    //   arr: [0,0,0,0,0,0]
    const state=ref([0,0,0,0,0,0])
         console.log(state.value)
    ;

    const datalist = () => {
      getcount().then(
          (res) => {
            console.log(res)
            state.value = res.countlist
            console.log(state.value)

          })


    };
      onMounted(()=>datalist())

    const options1 = {
      type: "bar",
      title: {
        text: "最近一周各品类销售图",
      },
      bgColor: "#fbfbfb",
      labels: ["汕头", "深圳", "广州", "珠海", "郑州", "广西"],//横坐标名称
      datasets: [
        {
          label: "系统故障",
          fillColor: "rgba(241, 49, 74, 0.5)",
          data: state.value,
        },
        {
          label: "油液渗漏",
          data: state.value,
        },
      ],
    };


其中data里面的state总是没有变化 得不到响应

希望巨佬能教教我怎么改 卡了好几天了

  • 写回答

3条回答 默认 最新

  • 小草的味道 2022-05-16 09:16
    关注

    setup 里面的值暴露出来。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • Bug 终结者 Java领域优质创作者 2022-05-17 13:39
    关注

    刷新没有变化吗,可以拿到响应数据,无法渲染吗

    评论
  • web修理工 2022-05-18 16:09
    关注
    
    
    
    <template>
      <div>
        <div class="schart-box">
          <div class="content-title">柱状图</div>
          <schart
            class="schart"
            canvasId="bar"
            :options="state1.options1"
          ></schart>
        </div>
    
      </div>
    </template>
    
    <script>
    import Schart from "vue-schart";
    // import {getcount} from "../api";
    import {
      ref,
      reactive,
      onMounted,
      onUpdated,
      onBeforeMount,
      toRefs,
    } from "vue";
    
    export default {
      name: "basecharts",
      components: {
        Schart,
      },
      setup() {
        // const state = reactive({
        //   arr: [0,0,0,0,0,0]
        const state = ref([1, 1, 1, 2, 2, 2]);
        // console.log(state.value);
    
        // const state = reactive({ data: [1, 1, 1, 2, 2, 2] });
    
        const state1 = reactive({
          options1: {
            type: "bar",
            title: {
              text: "最近一周各品类销售图",
            },
            bgColor: "#fbfbfb",
            labels: ["汕头", "深圳", "广州", "珠海", "郑州", "广西"], //横坐标名称
            datasets: [
              {
                label: "系统故障",
                fillColor: "rgba(241, 49, 74, 0.5)",
                data: state.value,
              },
              {
                label: "油液渗漏",
                data: state.value,
              },
            ],
          },
        });
    
        const datalist = () => {
          console.log("123", state.value);
          // getcount().then(
          //     (res) => {
          //       console.log(res)
          //       state.value = res.countlist
          //       console.log(state.value)
          //     })
    
          setTimeout(() => {
            state.value = [1, 2, 3, 4, 5];
    
            state1.options1 = {
              type: "bar",
              title: {
                text: "最近一周各品类销售图",
              },
              bgColor: "#fbfbfb",
              labels: ["汕头", "深圳", "广州", "珠海", "郑州", "广西"], //横坐标名称
              datasets: [
                {
                  label: "系统故障",
                  fillColor: "rgba(241, 49, 74, 0.5)",
                  data: state.value,
                },
                {
                  label: "油液渗漏",
                  data: state.value,
                },
              ],
            };
            console.log(state1);
          }, 300);
        };
        onMounted(() => datalist());
    
        return {
          state1,
        };
      },
    };
    </script>
    
    
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 5月25日
  • 已采纳回答 5月17日
  • 创建了问题 5月15日

悬赏问题

  • ¥15 Qt 不小心删除了自带的类,该怎么办
  • ¥15 我需要在PC端 开两个抖店工作台客户端.(语言-java)
  • ¥15 有没有哪位厉害的人可以用C#可视化呀
  • ¥15 可以帮我看看代码哪里错了吗
  • ¥15 设计一个成绩管理系统
  • ¥15 PCL注册的选点等函数如何取消注册
  • ¥15 问一下各位,为什么我用蓝牙直接发送模拟输入的数据,接收端显示乱码呢,米思齐软件上usb串口显示正常的字符串呢?
  • ¥15 Python爬虫程序
  • ¥15 crypto 这种的应该怎么找flag?
  • ¥15 代码已写好,求帮我指出错误,有偿!