Alpinejs x-if 没有被触发答案

【问题标题】：Alpinejs x-if is not being triggeredAlpinejs x-if 没有被触发
【发布时间】：2022-10-13 15:53:16
【问题描述】：

我有从 ajax 提取的数据。我希望这个数据只有在成功拉取时才显示。

import Alpine from 'alpinejs'
import axios from 'axios'

const http = axios.create({
    baseURL: 'url',
})

window.axios = http

window.Alpine = Alpine


document.addEventListener('alpine:init', () => {
    Alpine.data('cart', () => ({
        items: null,

        init(){
            window.axios.get('wc/store/cart')
                .then(({data})=>{
                    this.items = data
                    console.log(this.items)
                }).catch(error => {
                console.log(error.toString())
            })
        },

        
    }))
})

Alpine.start()

现在我在我的模板中使用它

<div x-data="cart">

<template x-if="items">      
      <h1>Shopping Cart</h1>
      <!-- display items here --> 
</template
</div>

问题是，显示了 h1 元素，但不显示来自 ajax 的数据。

我做错什么了吗。我很有信心这应该会奏效。

【问题讨论】：

嗨，我很困惑，从 ajax 显示数据的代码是什么？我的意思是你写评论“<！--在此处显示项目-->”的代码。

标签： alpine.js

【解决方案1】：

您没有显示您的项目。请记住，template 标签需要单身的仅根元素。

<div x-data="card">
    <template x-if="items">
        <div>
            <h1>Shopping Cart</h1>
            <template x-for="item in items">
                <div>
                    <h2 x-text="item.text"></h2>
                </div>
            </template>
        </div>
    </template>
</div>

【讨论】：