为什么在尝试使用 alpine.js x-model 指令进行双向绑定时 "this.connection" 未定义

Question

我正在构建一个非常基本的 Guacamole 客户端用于概念验证，我正在使用 Alpine.js 将包含连接值的表单输入元素绑定到相应的 this.connection 数据组件的对象，但是当涉及到在我的 connect() 方法中使用属性时，this.connection 是未定义的。我希望它包含分配给我的连接属性（方案、主机名、端口、用户名和密码）的值。

x 数据对象方法：

function manage() {
    return {
        connection: {
            scheme: '',
            hostname: '',
            port: '',
            username: '',
            password: ''
        },

        connect: () => {
            console.debug(this.connection) // <--- undefined
            let query = gc.generateConnectionQueryString(this.connection)

            gc.connect({
                websocketUrl: 'url-here',
                connectionQueryString: query
            })
        }
    };
}

组件HTML：

<div id="app" x-data="manage()">
    <div class="container mb-12">
        <form action="#" method="post" @submit.prevent="connect()">
            <div class="row">
                <div class="label">
                    <label for="scheme">Protocol</label>
                </div>
                <div class="data">
                    <input type="text" id="scheme" name="scheme" x-model="connection.scheme" placeholder="e.g. rdp, ssh, vnc">
                </div>
            </div>
            <div class="row">
                <div class="label">
                    <label for="hostname">Hostname</label>
                </div>
                <div class="data">
                    <input type="text" id="hostname" name="hostname" x-model="connection.hostname" placeholder="e.g. myserver.net, 192.168.1.242">
                </div>
            </div>
            <div class="row">
                <div class="label">
                    <label for="port">Port</label>
                </div>
                <div class="data">
                    <input type="text" id="port" name="port" x-model="connection.port" placeholder="e.g. 5901">
                </div>
            </div>
            <div class="row">
                <div class="label">
                    <label for="username">Username</label>
                </div>
                <div class="data">
                    <input type="text" id="username" name="username" x-model="connection.username" placeholder="username">
                </div>
            </div>
            <div class="row mb-2">
                <div class="label">
                    <label for="password">Password</label>
                </div>
                <div class="data">
                    <input type="text" id="password" name="password" x-model="connection.password" placeholder="password">
                </div>
            </div>
            <div class="row">
                <input type="submit" class="bg-blue" value="Connect">
                <button type="button" class="ml-6 bg-red">Disconnect</button>
            </div>
        </form>
    </div>
    <div class="viewport" id="viewport">
        <div tabindex="0" class="display" id="display"></div>
    </div>
</div>

有谁知道我做错了什么以及如何解决我的属性未定义问题？我尝试在 Alpine.js Github 存储库中寻找答案，但找不到我要找的东西，我们将不胜感激。

Answer 1

您无法在对象本身中获取正在 return 的对象。

首先在函数中创建一个变量，然后return它并在没有this的情况下获取它：

function manage() {

 // Create variable before returning
 let connection = {
      scheme: '',
      hostname: '',
      port: '',
      username: '',
      password: ''
 }

 return {
  connection, // (same as connection: connection)
  connect: () => {

   console.debug(connection); // Will return the connection you defined in the variable

   // YOUR CODE  

  }
 }

}

为什么在尝试使用 alpine.js x-model 指令进行双向绑定时 "this.connection" 未定义

Why is "this.connection" undefined when attempting two-way binding with alpine.js x-model directive

html

javascript

alpine.js