我有 trainers.inc.php 檔案，它用從資料庫中檢索到的資料生成陣列：
$trainers_meta[0] = array('Id' => $id, 'Name' => $name, 'Description' => $description, 'Experience' => $experience, 'Focus' => $focus, 'Fileformat' => $format, 'File' => $file);
我使用 PHPjson_encode()函式將 PHP 陣列編碼為 JSON ：
$trainers_meta = json_encode($trainers_meta);
轉換沒有任何我專門檢查過的警告或錯誤。在我的index.php檔案的頂部，我需要trainers.inc.php檔案：
require_once('trainers.inc.php');
在檔案的底部，我創建了一個 JavaScript 變數，其中包含一個<script>標簽內的轉換后的 JSON 內容：
<script>
let trainersMeta = <?php echo $trainers_meta;?>;
</script>
在檔案底部，我鏈接到 Vue.js CDN：
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
在上面的index.php檔案中，我嘗試使用v-forVue.js的屬性來回顯HTML 代碼：
<div class="container" v-for="trainer in trainersMeta">
<h1>Should appear on the page</h1>
</div>
但沒有內容出現。我的 IDE 告訴我一個警告，說 trainersMeta 變數未定義。我知道 Vue.js 必須在加載之前看到變數，這就是我在實際匯入它的 CDN 之前初始化它的原因。此外，我將<script>標簽放在變數上的檔案或位置始終未定義都無關緊要。我不能簡單地初始化 Vue.js 代碼內部的變數，因為 Vue.js 在這方面與 PHP 完全不兼容。即使將所有 Vue.js 代碼放在<script>標簽中index.php也不起作用，Vue.js 代碼因此根本無法編譯。如何將 PHP JSON 編碼的變數傳遞給 Vue.js 以便它查看/使用它？
uj5u.com熱心網友回復：
就其價值而言，我在今天之前從未使用過 Vue.js。我收集到的所有內容，我在大約 5 分鐘內從檔案中獲取。
你已經：
- 創建了一個變數 (
trainersMeta) - 構建模板 (
<div) - 加載了 Vue 庫 (
<script)。
你還沒有：
- 撰寫了一個 Vue 應用程式來使用該資料
您需要創建一個具有 data 方法的物件，該方法回傳您創建的物件，您需要Vue.createApp使用該物件進行呼叫，然后將其安裝在模板周圍的容器上。
這樣的：
<script>
let trainersMeta = {
Id: 123,
Name: 'Bob'
};
</script>
<div id="app">
<div class="container" v-for="trainer in trainersMeta">
<h1>Should appear on the page</h1>
{{trainer}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
const Trainers = {
data() {
return {
trainersMeta
}
}
}
Vue.createApp(Trainers).mount('#app')
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/385794.html
標籤：javascript php 数组 json Vue.js