Vue3 - Table 没有响应更新？ axios请求

Question

我正在尝试根据附近区域的 google 地图查询动态更新 table。查询在 onMounted 生命周期中 return 获取正确的数据，但没有 return 适当的数据，也没有在渲染时显示它。

我试过让它成为反应式的，一个 ref，将它移动到另一个方法等等。

axois 请求实际上正在记录相关数据，正如我在下面的程序中标记的那样，但实际上并没有 return axios 在渲染时获取值。

  <script>
    import { reactive, ref, onMounted } from "vue";
    import Vue3Geolocation from "vue3-geolocation";
    const axios = require("axios");
    export default {
      name: "App",
      setup() {
        let fjson = ref(null);
    
        onMounted(async () => {
          const URL = google query url
          fjson.value = await axios.get(URL, {
            headers: {
              "X-Requested-With": "XMLHttpRequest",
            },
          });
    
          fjson.value = JSON.parse(JSON.stringify(fjson.value));
    
          **** THIS LOGS THE RIGHT VALUE! ****
          console.log(fjson.value.data.results);
    
          if (fjson.value.data.results.length > 2) {
            for (let index = 0; index < 3; index++) {
              console.log(fjson.value.data.results[index]);
            }
          }
    
          **** ALSO WORKS! ****
          fjson.value.data.results.forEach((place) => {
            const lat = place.geometry.location.lat;
            const lng = place.geometry.location.lng;
            let marker = new google.maps.Marker({
              position: new google.maps.LatLng(lat, lng),
              map: map,
            });
    
            google.maps.event.addListener(marker, "click", () => {
              infowindow.setContent(
                `<div class="ui header">${place.name}</div><p>${place.vicinity}</p>`
              );
              infowindow.open(map, marker);
            });
          });
        });
    
        **** LOGS NULL :( ****
        console.log(fjson.value);
        return { mapDiv, coords, fjson: fjson.value };
      },
    };
    </script>
    
    <template>
      <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12 d-flex align-items-stretch">
          <div class="card" style="width: 100%">
            <div class="card-header text-white" style="background-color: #00aa9e">
              <div v-for="result in fjson">
                <p>{{ result }}</p>
              </div>
              Nearby churches
            </div>
          </div>
        </div>
      </div>
    
      <div ref="mapDiv" style="width: 100%; height: 80vh" />
    </template>

Answer 1

onMounted 在设置函数之后调用。由于你的 console.log(fjson.value);在你的 onMounted 回调之外，它在你的 axios 请求之前运行。

你的v-for也是错误的。应该是：

<div v-for="result in fjson.data.results">
    <p>{{ result }}</p>
</div>

因为结果是实际数组

Answer 2

onMounted() 在 setup() 方法期间没有被调用，这只是为组件安装时设置回调。 setup() 方法将运行并在调用 onMounted() 回调之前完成。由于 console.log(fjson.value); 在 setup() 方法的末尾，它在 onMounted() 中的任何代码执行之前被调用，所以它在那里将为空，这不是错误。基本上流程看起来像：

setup()被称为
fjson 已初始化
onMounted 回调已设置
日志fjson
setup() 结束
onMounted 并设置 fjson

您似乎还有另外两个问题。

您的 return 声明应该是：

return { mapDiv, coords, fjson };

您想确保您正在 return 反应对象。如果您只是 return value，您将获得 return 时的值，该值将为 null，并且不会被 onMounted 回调更新。

你的v-for应该是：

<div v-for="result in fjson.value.data.results">
   <p>{{ result }}</p>
</div>

你要确保你告诉 Vue 正确的属性用于 v-for 就像你为 forEach.

一样

Vue3 - Table 没有响应更新？ axios请求

Vue3 - Table not updating responsively? Axios request

javascript

vue.js

vuejs3