Vue3-表格沒有回應更新？axios請求

我正在嘗試根據附近區域的谷歌地圖查詢動態更新表格。該查詢在 onMounted 生命周期中回傳正確的資料，但在渲染時不回傳適當的資料或顯示它。

我嘗試過讓它成為反應式，一個參考，將它移動到另一種方法等等。

axois 請求實際上是在記錄相關資料，正如我在下面的程式中標記的那樣，但在渲染時實際上并沒有回傳 axios get 值。

  <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 >${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>

uj5u.com熱心網友回復：

onMounted()在方法期間不呼叫setup()，這只是為安裝組件時設定回呼。該setup()方法將在onMounted()呼叫回呼之前運行并完成。由于console.log(fjson.value);在方法的末尾，setup()它在執行任何代碼之前被呼叫onMounted()，所以它在那里將為空，這不是一個錯誤。基本上流程看起來像：

1. setup()叫做
2. fjson被初始化
3. 回呼已onMounted設定
4. 日志fjson
5. setup()完成
6. onMounted被呼叫并被fjson設定

看起來你還有另外兩個問題。

您的退貨宣告應為：

return { mapDiv, coords, fjson };

你的v-for應該是：

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

uj5u.com熱心網友回復：

onMounted 在 setup 函式之后呼叫。因為你的 console.log(fjson.value); 在您的 onMounted 回呼之外，它在您的 axios 請求之前運行。

你的 v-for 也是錯誤的。它應該是：

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

因為 results 是實際的陣列

標籤：javascript Vue.js Vuejs3

上一篇：如何訪問Vue.js中的laravel驗證錯誤？

下一篇：如何在三元運算子中傳遞svg？