Alpine.js中select标签取值异常：获取到字符串item.dataid而非实际值

AI 小北

2026-6-16

解决Select选中值获取异常的问题

核心问题分析

你遇到的问题是option的value绑定未正确解析为item.dataid的实际值，反而被当成字符串字面量"item.dataid"输出。结合你使用的Alpine.js指令，可通过以下步骤修正：

正确代码实现

确保循环生成选项的语法完全规范，以下是标准写法：

<select x-model="areaData" x-on:change="selectArea">
  <!-- Alpine.js循环需用template包裹子元素 -->
  <template x-for="item in dropdownData" :key="item.dataid">
    <option :value="item.dataid" x-text="item.displayname"></option>
  </template>
</select>

对应的selectArea方法可简化为（利用双向绑定直接取值）：

function selectArea() {
  // 直接通过this.areaData获取选中的dataid实际值
  console.log(this.areaData);
}

关键修正点

循环容器必须用<template>：Alpine.js的x-for指令要求循环子元素必须放在<template>标签内，否则会丢失循环上下文，导致item无法正确解析。
放弃手动传递$event参数：既然已绑定x-model="areaData"，areaData会自动同步选中的option值，直接在方法里读取this.areaData更可靠，避免参数解析错误。
检查绑定语法：确保:value="item.dataid"没有给item.dataid加引号（比如写成:value="'item.dataid'"），否则会被解析为字符串字面量而非变量值。
兼容XML语法：由于你使用XML文件，注意所有属性必须用双引号包裹，不能用单引号，否则XML解析器会导致绑定指令失效。