如何根据ajax结果更改alpine.js x-text元素内容？

问题描述 投票：0回答：1

我正在研究 alpine.js，当该值可用时（如 ajax），我无法弄清楚如何从另一个 js 脚本设置 x-text 值 在示例中，我没有使用 ajax 来使其变得简单尽可能但效果相同。 我有 x-text 元素，想稍后更改 data() 中的内容。

<html lang="en" x-data="data()">
<head>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer=""></script>
    <script>
        function data() {
            return {
                userEmail:'***',//value replaced on load
                setEmail(newValue) {
                    console.log(newValue);//passed value needs to be set as new value
                    this.userEmail = newValue;
                }
            }
        }
        let fn = (newValue)=>{
            data().setEmail(newValue);
        }
    </script>
</head>
<body>
    <div x-text="userEmail">loaded value</div>
    <button onclick="fn('new value here')">Click me</button>
</body>
</html>
ajax alpine.js
1个回答
0
投票

由于几个不同的原因，这是有问题的。

  1. Alpine 适用于具有 x-data 属性的元素。
<div x-data="data()">
    <div x-text="userEmail">loaded value</div>
    <button onclick="fn('new value here')">This is incorrect</button>
</div>

  1. 接下来的问题来了。 

    fn()
    使用 data() 创建一个对象，使用 
    userEmail
    设置 
    setEmail()
    ，然后丢弃结果。每次调用 
    data()
    时，都会以原始状态返回一个新对象。

  2. 您只能使用事件来修改 x-data 对象的内容。为了能够使用像 

    $dispatch
    这样的 Alpine 功能，您必须使用 Alpine 事件处理程序（x-on: 或 @）。

<div x-data="data()" @update-email.window="setEmail($event.detail.email)">
    <div x-text="userEmail">loaded value</div>
</div>
    
<button @click="$dispatch('update-email', { email: 'new dispatched email' })">
    Dispatch event
</button>

如果发送事件的按钮位于接收事件的 x-data 范围之外，则需要在事件处理程序上使用 .window。这样，事件将冒泡到窗口对象并在那里被捕获。如果事件是从 x-data 范围内引发的，则不需要它。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.