尝试在 table 上创建查找器时出错
Error when trying to create a finder on a table
我正在尝试替换我在 django 中制作的应用程序的 jquery,我正在尝试使用刺激 js,因为它与 turbolink 一起使用似乎是一个不错的选择,但是我在创建datatable,当在搜索引擎中输入文本时,它确实正确,它 returns 我写的,但问题出在 table 因为浏览器控制台 returns 未定义价值。
这是我的 html:
<div data-controller="search">
<input type="text" placeholder="Buscar..." maxlength="15" data-action="search#searchTable"data-search-target="q">
<table class="highlight centered">
<thead>
<tr>
<th>Tipe de Tarea</th>
<th>Estado</th>
<th>Fecha de Creacion</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
<tr>
{% for field in object_list %}
<td data-search-target="name">{{ field.name }}</td>
<td>{{ field.status|yesno:"Visible, No visible" }}</td>
<td>{{ field.created_at }}</td>
<td>
<a href="#!">editar</a>
</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
这是我的控制器:
const application = Stimulus.Application.start();
const { Controller } = Stimulus;
application.register(
'search',
class extends Controller {
static get targets() {
return ['q', 'name'];
}
searchTable() {
console.log(this.nameTarget.value);
}
}
);
我认为您混淆了目标。 q
是输入并且会有一个值。 name
是一个 table 单元格,因此只有一个 innerHTML
。相反,它应该是:
searchTable() {
console.log(this.qTarget.value);
}
但我建议您更进一步,将事件传递给您的 searchTable 函数。那么你不需要输入数据目标。
searchTable(e) {
console.log(e.srcElement.value);
}
我正在尝试替换我在 django 中制作的应用程序的 jquery,我正在尝试使用刺激 js,因为它与 turbolink 一起使用似乎是一个不错的选择,但是我在创建datatable,当在搜索引擎中输入文本时,它确实正确,它 returns 我写的,但问题出在 table 因为浏览器控制台 returns 未定义价值。 这是我的 html:
<div data-controller="search">
<input type="text" placeholder="Buscar..." maxlength="15" data-action="search#searchTable"data-search-target="q">
<table class="highlight centered">
<thead>
<tr>
<th>Tipe de Tarea</th>
<th>Estado</th>
<th>Fecha de Creacion</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
<tr>
{% for field in object_list %}
<td data-search-target="name">{{ field.name }}</td>
<td>{{ field.status|yesno:"Visible, No visible" }}</td>
<td>{{ field.created_at }}</td>
<td>
<a href="#!">editar</a>
</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
这是我的控制器:
const application = Stimulus.Application.start();
const { Controller } = Stimulus;
application.register(
'search',
class extends Controller {
static get targets() {
return ['q', 'name'];
}
searchTable() {
console.log(this.nameTarget.value);
}
}
);
我认为您混淆了目标。 q
是输入并且会有一个值。 name
是一个 table 单元格,因此只有一个 innerHTML
。相反,它应该是:
searchTable() {
console.log(this.qTarget.value);
}
但我建议您更进一步,将事件传递给您的 searchTable 函数。那么你不需要输入数据目标。
searchTable(e) {
console.log(e.srcElement.value);
}