在高山流中得到错误 var 未定义答案

【问题标题】：In alpine flow got error var is not defined在高山流中得到错误 var 未定义
【发布时间】：2021-06-28 22:15:31
【问题描述】：

在我的 Laravel 8 / tailwindcss 2 / Alpinejs 2.8 应用程序中在页面上，我使用 axios 加载数据列表并将我的模板填充到 alkpine 模板圈中：

<div class="editor_form_wrapper w-10/12" x-data="adminAdEditorComponent()">
   ...
            <div x-show="activeTab === 2" class="p-2">
                Tab #2 : Categories
                <div id="div_ad_categories">
                    <table x-show="adCategories.length">
                        <tbody>

                        <template x-for="nextCategory in adCategories" :key="nextCategory.id">
                            <tr>
                                <td class="editor_listing_cell" x-text="nextCategory.id">



function adminAdEditorComponent() {
    console.log('adminAdEditorComponent::')

    return {
        adCategories: [],
        showDatepicker: false,
        ...
        loadAdCategories: function () {
            window.axios.get('/admin/ads/{{ $ad->id }}/ad_categories', {}).then((response) => {
                console.log('response.data::')
                console.log(response.data)
                adCategories = response.data.categories
            }).catch((error) => {
                console.error(error)
            })

在控制台中我会发出警告：

Alpine Error: "ReferenceError: adCategories is not defined"
Expression: "adCategories"
Element: <template x-for="nextCategory in adCategories" :key="nextCategory.id">…</template>

但是在继续此警告流程并且我的列表中充满了数据之后... 我试图改变条件，比如

  <table x-show="typeof adCategories != 'undefined' &&  adCategories.length">
      <tbody>

但这并没有帮助，我还是收到了警告...如何解决这些警告...

修改块： 这没用。我做：

loadAdCategories: function () {
    window.axios.get('/admin/ads/{{ $ad->id }}/ad_categories', {}).then((response) => {
        console.log('loadAdCategories response::')
        console.log(response)
        console.log('response.data::')
        console.log(response.data)
        console.log('this::')
        console.log(this)
        this.adCategories = response.data.categories
    }
}

在浏览器中：https://prnt.sc/104pqie

以及我在浏览器中看到的内容： 2）我试图定义自我：

function adminAdEditorComponent() {
    console.log('adminAdEditorComponent::')

    return {
        adCategories: [],
        ...
        loadAdCategories: function () {
            var self = this
            window.axios.get('/admin/ads/{{ $ad->id }}/ad_categories', {}).then((response) => {
                console.log('loadAdCategories response::')
                console.log(response)
                console.log('response.data::')
                console.log(response.data)
                self.adCategories = response.data.categories

还有很多消息：

alpine.min.js:7 Alpine Error: "ReferenceError: adCategories is not defined"

在浏览器中：https://prnt.sc/104pm4a

在这两种情况下，类别列表均未填写。正如我在我的案例中所写的那样：

   adCategories = response.data.categories

类别列表填写正常。看起来像在线：

谢谢！

【问题讨论】：

你需要做this.adCategories = response.data.categories我认为
请看 MODIFIED BLOCK

标签： javascript alpine.js

【解决方案1】：

我最近遇到了同样的问题，唯一的区别是我收到了按钮点击的数据。感谢Hugo for his tweet about async/await in alpine，它帮助完成了这项工作。将它应用到您的代码中，您应该拥有（假设您的 Alpine 版本 >= 2.6.0）：

Alpine js

function adminAdEditorComponent() {
  return {
    adCategories: [],
    loadAdCategories: function() {
      window.axios.get('/admin/ads/{{ $ad->id }}/ad_categories', {})
        .then((response) => {
          console.log(response)
          this.adCategories = response.data.categories
        })
    }
  }
}

刀片

<div class="editor_form_wrapper w-10/12" x-data="adminAdEditorComponent()" x-init="await loadAdCategories()">
  ...
  <div id="div_ad_categories">
    <table x-show="adCategories.length">
      <tbody>
        <template x-for="nextCategory in adCategories" :key="nextCategory.id">
        <tr>
          <td class="editor_listing_cell" x-text="nextCategory.id"></td>
        </tr>
        </template>
      </tbody>
    </table>
  </div>
  ...
</div>

【讨论】：