javascript - 没有信息从产品列表传递到模式窗口 : Error in v-on handler: "TypeError: _vm.selectProduct is not a function"

Question

我有一个产品列表，其中有一个更多详细信息按钮，该按钮将打开一个包含该特定产品信息的模式窗口。我使用 $emit 将信息从产品页面传递到模式窗口。我看到模态窗口打开，但没有看到 Modal_window.vue 中定义的特定产品信息。

我不断收到错误:

[Vue warn]: Error in v-on handler: "TypeError: _vm.selectProduct is not a function"

vue.esm.js?efeb:1897 TypeError: _vm.selectProduct is not a function

这是我的代码:

Product_listing.vue

<template>
  <div class="content">
    <div v-for="product in productsWithHeadlines" :key="product.id">
      <div class="one">
        <span>{{product.name}}</span>
      </div>
      ...
      <div class="seven">
        <b-btn class="more_details_button" @click="selectProduct(product)">More details</b-btn>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  component: {
    modal_window: Modal_window
  },

  data() {
    return {
      showModal: false,
      selectedProduct: undefined,

      products: [
        {
          ID: "1",
          Name: "Product_1",
          Headline_1: "Headline 1",
          top_feature_1:
            "This is the description of the feature of product 1 under the first headline",
          Headline_2: "Headline 2",
          top_feature_2:
            "This is the description of the feature of product 1 under the second headline",
          Headline_3: "Headline 3",
          top_feature_3:
            "This is the description of the feature of product 1 under the third headline",
        },
{
          ID: "2",
          Name: "Product_2",
          Headline_1: "Headline 1",
          top_feature_1:
            "This is the description of the feature of product 2 under the first headline",
          Headline_2: "Headline 2",
          top_feature_2:
            "This is the description of the feature of product 2 under the second headline",
          Headline_3: "Headline 3",
          top_feature_3:
            "This is the description of the feature of product 2 under the third headline",
        }
      ]
    };
  },
  computed: {
    selectProduct(product) {
      this.selectedProduct = product;
      this.$emit("openModalWindow", this.selectedProduct);
    },

    productsWithHeadlines() {
      return this.products.map(product => {
        const totalKeys = Object.keys(product).length;
        const headlines = [];
        for (let index = 1; index < totalKeys; index += 1) {
          const text = product[`Headline_${index}`];
          const feature = product[`top_feature_${index}`];
          if (text && feature) headlines.push({ text, feature });
        }

        return {
          id: product.id,
          name: product.Name,
          headlines,
        };
      });
    }
  }
};
</script>

Modal_window.vue我在模式窗口中使用标题数据元素以及名称。

<template id="modal-template">
  <b-modal id="showModal" :hide-footer="true" ok-title="Buy Now" size="lg" :title="product.name">
    <div class="inner-container">
      <div class="inner-nested">
        <div class="inner-one">
          {{ product.name }}
       </div>
          <ul>
            <li v-for="(headline, index) in product.headlines" :key="index">
              <div>{{ headline.text }}</div>
              <div>{{ headline.feature }}</div>
            </li>
          </ul>
          <br />
          <br />
        </div>

      </div>
    </div>
  </b-modal>
</template>

<script>

export default {
  data() {
    return {
      showModal: false,
      product: { type: Object, default: null }
    };
  },
  methods: {
    openModal(newProduct) {
      console.log(newProduct);
      this.product = newProduct;
      this.$bvModal.show("showModal");
    }
  }
};
</script>

希望得到一些帮助，谢谢!

Answer 1

正如错误所述 - selectProduct 不是一个函数，它本身可以解决这里的问题。

了解 vue 的计算属性和方法属性有何不同。

计算这些属性被转换为带有 getter 和 setter 的 vue 属性，这意味着您可以从中获取值，也可以设置预定义值，它不接受参数

例如-

computed : {
  hello() {
    return 'helloWorld' // Getting a value 
  }
}

你将使用它作为 this.hello ，其中的方法完美地复制了 JS 中的普通 function ，并且具有理解其他 vue 属性的能力

methods : {
      hello(name) {
        return 'hello' + name // Getting a value 
      }
    }

正如所说，它是一个 fn，所以它也可以有参数，你可以将它用作 fn，如 this.hello(name)

在您的情况下，您可能希望将 selectProduct 属性移动到 methods 属性，而不是作为 compulated 属性。