标签: alpine.js

如何使用 Alpine.js 创建可重用组件并显示它？例如，也许我想定义一个通用的 Alpine.js 按钮组件，用于更改参数中的文本和颜色，然后让我的 Alpine.js 导航栏组件使用该按钮组件来显示登录按钮。

我可以在纯客户端代码中执行此操作，而不依赖于在使用按钮组件的所有地方模板化所有按钮 HTML 的服务器吗？

我将Livewire和Alpine与Laravel 8一起使用。

我有一个带有数据表（jQuery）和引导模式的页面。
该表填充了模型实例列表中的一些数据。
当我单击表中的按钮时，它会打开模式并允许编辑相应的记录。
这部分正在按预期工作。

然而，Datatable库与 Livewire 一起使用要困难得多，因此我决定将整个Datatable的范围限制在<div>withwire:ignore属性中。
因此，如果我想在进行修改后刷新数据表$refresh，我无法使用魔法，因为数据表当前的范围位于wire:ignore.

所以我正在考虑在编辑完成后重新加载整页，但我不知道如何做到这一点，return redirect()->back()不起作用......

这就是我的save方法，当模态编辑完成时调用该方法：

public function save()
{
    MyModel::where('id', $this->edited_id)->update([...]);
    $this->clearSelection();
    return redirect()->back(); // This is not working
}

这是我的桌子：

<div wire:ignore>
    <table class="dt-table table">
        <thead>
            <tr>
                <th>Actions</th>
                <th>id</th>
                <th>name</th>
                <th>other</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($models as $m)
                <tr>
                    <td>
                        <button type="button" class="btn btn-primary" data-toggle="modal" …

vitejs 中已经有“watch”属性了吗？我正在使用 Laravel Framework 9.19.0 启动一个新项目，其中 vite 是自动安装的。我在前面添加了 alpine.js。我试过跑

npm 运行手表

这是我的 package.json 文件

{
"private": true,
"scripts": {
    "watch": "npm-watch",                       <-<=-----I've added this line------->
    "dev": "vite",
    "build": "vite build"
},
"devDependencies": {
    "axios": "^0.25",
    "laravel-vite-plugin": "^0.2.1",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "vite": "^2.9.11"
},
"dependencies": {
    "alpinejs": "^3.10.2"
}

}

并发生以下错误。

   0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose …

我想允许所有 Alpine JS 组件（x-data、x-init等）作为TinyMCE 4 中所有HTML 标签的属性。

我尝试通过规则以extended_valid_attributes不同的方式添加它们，但一切都失败了。它们要么仍然从代码中删除，要么变得有效，但所有其他属性都会被删除。

以下是我已经尝试过的一些示例，其中大部分是我在此处找到的其他tinyMCE问题的答案（例如TinyMCE 4 - 将自定义样式/类/属性添加到任何HTML标记）并阅读tinyMCE文档（https:// www.tiny.cloud/docs-4x/configure/content-filtering/#extended_valid_elements，https://www.tiny.cloud/docs-4x/configure/content-filtering/#controlcharacters）：

$alpineAttributes = 'x-data|x-init|x-show|x-text|x-html|x-model|x-for|x-transition|x-effect|x-ignore|x-ref|x-cloak|x-teleport|x-if|x-id';

$settings['extended_valid_elements'] = '*['. $alpineAttributes .']';

-> 通过 : 选择所有元素*不起作用，高山属性仍然被剥夺

$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],div,a,p';

-> 在这里，至少div、a和p标签的属性不再被剥离，但是通常这三个标签中的每一个都允许的所有其他属性现在都被剥离，因为允许的属性列表不会被扩展，而是被覆盖我的属性。

$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],*';

-> 不起作用，高山属性仍然被剥夺

$settings['extended_valid_elements'] = '@['. $alpineAttributes .']';

-> 不起作用，高山属性仍然被剥夺

难道真的没有办法只扩展每个元素允许的属性列表，而不是用我的规则完全覆盖它吗extended_valid_elements？

希望能够使用 Alpine.js 进行下拉选择表单。当您从选择菜单中选择特定选项时，页面会插入一组相关记录。我将如何用 Alpine.js 完成这样的事情

例如

1. 从选择菜单中选择美国、加拿大和墨西哥。假设美国被选中
2. 检索美国的列表商店。（我知道我会通过 PHP 查询，发送一个参数）

我正在尝试将backAfterSaveStatus值绑定到隐藏输入，由于某种原因，提交的表单backAfterSave值为空。之后我回去再次提交表单 -backAfterSave值是1。问题出在哪里？我没有尝试过同样的事情prevent，submit()但它仍然无法正常工作。此外，我已经转储了 div，x-text并且代码在提交表单之前将隐藏输入设为 1。我做错了什么？

<form action="<...>" method="post">
    <div x-data="{
        backAfterSaveStatus: '',
        backAfterSave () {
            this.backAfterSaveStatus = '1';
            document.querySelector('form.withBackAfterSave').submit();
        }
    }">
        <input name="backAfterSave" :value="backAfterSaveStatus">
        <div>
            <span>
                <button x-on:click.prevent="backAfterSave()" type="submit">
                    Save & back
                </button>
            </span>
            <span>
                <button type="submit">
                    Save
                </button>
            </span>
        </div>
    </div>
</form>

我想要与下面相同的结果：

let buttonBackAfterSave = document.getElementById('button-back-after-save');

if (buttonBackAfterSave) {
    buttonBackAfterSave.addEventListener('click',  () => document.getElementById('input-back-after-save').value = 1);
}

我想构建一个在鼠标悬停时显示并显示元素的菜单：类别：-子类别1-子类别2

我设法做到了这一点，但我的问题是，当我将鼠标悬停在菜单上并显示里面的元素并且我将鼠标移离菜单本身时，元素不会隐藏。

这是我的代码：

<div x-data="{open: false}">
    <button @mouseover="open = true">Category</button>
    <div x-show="open" @mouseout="open = false" class="h-80 bg-red-900">
        <ul>
            <li>Sub-category 1</li>
            <li>Sub-category 2</li>
        </ul>
    </div>
</div>

我正在尝试 Alpine JS，并且来自 jQuery。我怎样才能在 Alpine jS 中做到这一点？

$('a').on('click', function(e) {
  $('div').not('.' + $(this).data('class')).hide('slow');
  $('.' + $(this).data('class')).slideToggle();
});

a {
 display: block;
}
 div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-class="a">Show all A's</a>
<div class="a">A</div>
<div class="a">A</div>
<div class="a">A</div>
<a href="#" data-class="b">Show all B's</a>
<div class="b">B</div>
<div class="b">B</div>

// 编辑这非常接近。有什么改进建议吗？谢谢！

a {
 display: block;
}

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
<section x-data="{ letter: '' }">
    <a href="#" @click.prevent="letter = (letter === 'a' ? '' : 'a')">Show all A's</a>
    <div x-show.transition.in="letter === …

我正在尝试使用 alpine JS 构建一个自定义添加和从数组中删除整个 div 元素，这是我的代码，它正在工作，但不是从确切的删除按钮中删除，而是单击它将删除数组中的最后一个元素。

超文本标记语言

<div x-data="addRemove()">
  <template x-for="(field, index) in fields" :key="index">
    <div>
      <input type="text" name="txt1[]" class="form-input">
      <button type="button" class="btn btn-danger btn-small" @click="removeField(index)">&times;</button>
    </div>
  </template>
  <button type="button" @click="addNewField()">+ Add Row</button>
</div>

脚本语言

return {
        fields: [],
        addNewField() {
            this.fields.push({});
        },
        removeField(index) {
            this.fields.splice(index, 1);
        }
    }

我有这样的带有嵌套组件的代码：

<html>
<head>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

</head>

<body>
  <div x-data="{isOpen: false}">
    <div x-data="{isOtherOpen: false}">
     
     
     <a href="#" @click="isOpen = !isOpen">Toogle element</a>

      <div x-show="isOpen">
        Now element is opened

      </div>


      <a href="#" @click="isOtherOpen = !isOtherOpen">Toogle other element</a>

      <div x-show="isOtherOpen">
        Now other element is opened
      </div>
      
    </div>
  </div>

</body>

</html>

但它似乎不起作用。有什么理由让它使用嵌套组件工作，或者 Alpine.js 还不能处理这个问题？当然，我知道改变：

<div x-data="{isOpen: false}">
   <div x-data="{isOtherOpen: false}">

进入

<div x-data="{isOpen: false, isOtherOpen: false}">
   <div>

会解决这个问题，但这样我就会有单个组件。