我无法在 Alpine JS 中确定此消息的原因

Question

我收到此错误，不知道如何解决：

alpine.js:115 Alpine Error: "ReferenceError: Invalid left-hand side in assignment"

Expression: "getTasks() = rightSideOfExpression($event, getTasks())"
Element: <input class=​"shadow appearance-none border rounded w-1/​3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:​outline-none focus:​shadow-outline" id=​"valorvenda" type=​"text" placeholder=​"Valor" autofocus x-ref=​"valorvenda" @keydown.enter=​"addTask($refs.valorvenda.id)​">​
u @ alpine.js:115
(anonymous) @ alpine.js:132

    <input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorvenda" type="text" placeholder="Valor" autofocus="" x-ref="valorvenda" @keydown.enter="addTask($refs.valorvenda.id)">

VM5454749:3 Uncaught (in promise) ReferenceError: Invalid left-hand side in assignment
    at eval (eval at d.el (alpine.js:174), <anonymous>:3:21)
    at d.el (alpine.js:174)
    at d (alpine.js:131)
    at alpine.js:151
    at be.evaluateCommandExpression (alpine.js:1760)
    at z (alpine.js:933)
    at HTMLDivElement.l (alpine.js:909)

并且不知道我在做什么！你能帮帮我吗？

Answer 1

您可能打算比较而不是分配。将= 更改为==：

getTasks() == rightSideOfExpression($event, getTasks())

Answer 2

我整个周末都在寻找问题。 我相信原因是因为我正在使用这样的 x-model 属性：

<div x-data="tasks()" x-init="getTasks()" x-model="getTasks()">
           <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
              <div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200">
                 <div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-green-800 bg-green-100">
                    Definir estratégia de COMPRA: 
                    <input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorcompra" type="text" placeholder="Valor" autofocus x-ref="valorcompra" @keydown.enter="addTask($refs.valorcompra.id)">
                    <input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="percentualcompra" type="text" placeholder="Percentual">
                    <input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadecompra" type="text" placeholder="Quantidade">
                 </div>
                 <template x-for="(t, taskIndex) in tasks.filter(t => t.coin === window.moeda && t.boardName === 'compra')" :key="taskIndex">
                    <div :id="t.uuid">
                       <div class="bg-white rounded-lg shadow mb-3 p-2 text-sm">
                          <div x-text="t.name" class="text-gray-800"></div>
                          <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
                             <div x-text="formatDateDisplay(t.date)" class="text-gray-500 text-xs"></div>
                             <div class="items-start text-right text-red-800" @click="removeTask(t.uuid)"><i class="fa fa-times-circle" aria-hidden="true"></i></div>
                          </div>
                       </div>
                    </div>
                 </template>
              </div>
              <div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200">
                 <div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-red-800 bg-red-100">
                    Definir estratégia de VENDA: 
                    <input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorvenda" type="text" placeholder="Valor" autofocus x-ref="valorvenda" @keydown.enter="addTask($refs.valorvenda.id)">
                    <input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="percentualvenda" type="text" placeholder="Percentual">
                    <input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadevenda" type="text" placeholder="Quantidade">
                 </div>
                 <template x-for="(t, taskIndex) in tasks.filter(t => t.coin === window.moeda && t.boardName === 'venda')" :key="taskIndex">
                    <div :id="t.uuid">
                       <div class="bg-white rounded-lg shadow mb-3 p-2 text-sm">
                          <div x-text="t.name" class="text-gray-800"></div>
                          <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
                             <div x-text="formatDateDisplay(t.date)" class="text-gray-500 text-xs"></div>
                             <div class="items-start text-right text-red-800" @click="removeTask(t.uuid)"><i class="fa fa-times-circle" aria-hidden="true"></i></div>
                          </div>
                       </div>
                    </div>
                 </template>
              </div>
           </div>
        </div>

在这里分配一个JS函数是错误的原因。我需要的是一种在每次运行 getTasks() 函数时更新 x 数据的方法，但我不知道该怎么做。