标签: vue-component

我正在循环具有子组件的根组件。

<root-select v-for="offer in offers"  >
   <child-options v-for="item in options" >
   </child-options>
</root-select>

但是，当我$emit从 child 获取 root 函数时，我所有的 root 组件都更改了这些数据。

孩子：

EventBus.$emit('toggle', value);

根：

EventBus.$on('toggle', this.toggle);

但我需要，该数据仅在触发组件中更改。

谢谢。

嗨，我有一个关于触发组件 b-form-file 的问题。

<b-form-file ref="imageProfile"></b-form-file>

我尝试使用 this.$refs.imageProfile.click() 不起作用。而且我在该元素上没有找到单击功能。

谢谢你。

这是我在做什么： 我有一个表单集组件，它通过 ajax 获取数据来填充表单集。用户可以从表单修改这些数据并提交。

问题：这很好用。但是，我注意到如果我导航到另一个页面然后点击浏览器“返回一页”按钮，表单在那里（模板中的 DOM）但是是空的。v-model 输入字段中不再有数据绑定...

大多数关于此行为的帖子都与我不使用的 vue-router 相关。

我认为它可能需要处理生命周期钩子......实际上，在我的组件上，我在“挂载”时获取数据。但是，如果是这样，哪个生命周期？

我也尝试过“保持活力”但没有成功。

我在我的组件上放了一些详细的日志，试图在浏览器返回时捕获生命周期钩子，但没有打印出来......

beforeCreate: function() {
    console.log('---- BEFORE CREATE ----> ')
},
created: function() {
    console.log('---- CREATED ----> ')
    this.getModelObjects();
},
beforeMount: function() {
    console.log('---- BEFORE MOUNT ----> ')
},
mounted: function() {
    console.log('---- MOUNTED ---->')
    this.getModelObjects();
},
beforeUpdate: function() {
    console.log('---- BEFORE update ----> ')
},
updated: function() {
    console.log('---- UPDATED ----> ')
},
beforeDestroy: function() {
    console.log('---- BEFORE DESTROY ----> ')
},
destroyed: function() {
    console.log('----  DESTROYED ----> …

这是我第一次使用 Vue.js。我制作了这个应用程序，它使用我在脚本中手动添加的数据。现在我希望能够添加一个 JSON 文件，它从中获取数据，但我不知道如何做到这一点。您可以在下面找到我的代码。

HTML：

<div id="app">

<div class="search-wrapper">
    <input type="text" v-model="keyword" placeholder="Zoek telefoon..." />
</div>

<div class="wrapper">

    <table style="width:100%; text-align: left;">
      <tr>
        <th style="text-align: left; width: 33%">Telefoon</th>
        <th style="text-align: left; width: 33%">Scherm</th> 
        <th style="text-align: left; width: 33%">Batterij</th>
      </tr>
    </table>

    <div v-for="post in filteredList">        
        <table style="width:100%; text-align: left">
          <tr style="text-align: left;">
            <td style="text-align: left; width: 33%">{{ post.title }}</td>
            <td style="text-align: left; width: 33%">{{ post.scherm }}</td> 
            <td style="text-align: left; width: 33%">{{ post.batterij }}</td>
          </tr>
        </table>
    </div>

</div>

Vue.js：

var app = …

我的情况一定很奇怪，但我对此有好处。这是我的情况：

我有一个基于 json 呈现表单的 Vue 应用程序。例如，JSON：

{
  "fields": [{
      "name": "firstName",
      "title": "Name"
  }, {
      "name": "lastName",
      "title": "Last Name"
  }, {
      "title": "Hello {{ firstName }}!"
  }]
}

从那个 json，最终的渲染必须是：

<input type="text" name="firstName" v-model="firstName" />
<input type="text" name="lastName" v-model="lastName" />
<p>Hello {{ firstName }}</p>

我能够呈现所有这些，除了<p>呈现为原始{{ firstName }}而不是数据绑定/反应性的。

我的问题是：如何将动态模板（可以来自 Rest API）插入到组件中，并使它们具有 mustache 表达式的全部功能。

该组件将具有类似

{...firstName field...}
<dynamic template will be added here and update whenever firstName changes>

如果我对这个问题不太清楚，请告诉我谢谢！！！

我是 VUEJS 的新手，无法使用包含 json 对象数组的本地 JSON 文件中的国家/地区名称填充 vuetify 选择元素。它不是填充选项，而是为每个国家/地区创建单个选择对象。

这是我的表格....

<form>
  <v-select v-validate="'required'" v-bind="countryData"
  v-for="item in countryData" :key="item.name" :items="item.name"
  v-model="select" :error-messages="errors.collect('country')"
  label="Country" data-vv-name="country" prepend-icon="mdi-flag"
  required></v-select>
 </form>

这是我的剧本......

<script>
import Vue from "vue";
import VeeValidate from "vee-validate";
import countryData from '@/components/countryData.json';
Vue.use(VeeValidate);
export default {
  name: "signup",
  $_veeValidate: {
    validator: "new"
  },
  data: () => ({
    countryData: countryData,
    country: ''
    })
</script>

这里 JSON 文件结构...

[
    {
        "id": 1,
        "name": "Afghanistan",
        "iso3": "AFG",
        "iso2": "AF",
        "country_code": "4",
        "phone_code": "93",
        "capital": "Kabul", …

我有一个连接到 Vue.js 项目的聊天 API。

当用户进入聊天室页面时，它会发送一个 ajax 请求，然后调用获取整个聊天记录的函数：

mounted() {
$.ajax({
  url: `http://localhost:8000/api/rooms/${this.$route.params.id}/`,
  data: {username: this.username},
  type: 'PATCH',
  success: (data) => {
    const user = data.members.find((member) => JSON.parse(member).username === this.username)

    if (user) {
      // The user belongs/has joined the session
      this.fetchChatSessionHistory(this.$route.params.id)
    }
  }
})


},

  fetchChatSessionHistory (uri) {
    $.get(`http://127.0.0.1:8000/api/rooms/${uri}/messages/`, (data) => {
      this.messages = data.messages
    })
  },

但它失败了：

类型错误：_this.fetchChatSessionHistory 不是函数

我知道它可能被定义在错误的地方，但我不知道如何正确。

我有类似的问题： VueJs 2.0 - 如何侦听 `props` 更改，但在我的情况下，我将对象从父级发送到子级，也传递了几次以使用 JS 中对象引用的好处。

有一个例子，但工作正常：

<div id="app">
  <child :myprop="myObj"></child>
  <button @click="text = 'Another text'">Change text</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    myObj: {
       id: null
    }
  },
  components: {
    'child' : {
      template: `<div>
      <p>{{ myprop.id }}</p>
      <select v-model="myprop.id">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      </div>`,
      props: ['myprop'],
      watch: { 
        'myprop.id': function(newVal, oldVal) { // watch it
          console.log('Prop changed: ', newVal, ' | was: ', oldVal)
        }
      }
    }
  }
}); …

我正在尝试根据路线加载多个帐户的 twitter 时间线。例如，如果有人请求特定页面，则页面上会加载特定帐户的 Twitter 时间线。

我尝试使用一个名为的插件，vue-tweet-embed但它根本不起作用，所以，我尝试了旧方法。我widgets.js在我的主 HTML 文件中包含了 twitter ，并尝试使用静态代码包含时间轴，如下所示。

静态代码

<a class="twitter-timeline" href="https://twitter.com/Google?ref_src=twsrc%5Etfw">Tweets by Google</a>

现在，我想根据变量显示多个帐户的 Twitter 时间线。我的变量是一个对象的属性，因此，这是我尝试使用的代码。请注意，上面给出的静态代码即使在 Vue 组件中也能工作。

动态代码

<a class="twitter-timeline" data-height="500px" v-if="isLoading===false" :href="'https://twitter.com/'+service.twitter_handle+'?ref_src=twsrc%5Etfw'"></a>

但是动态的不起作用。我检查了检查元素，代码生成的标记非常好。但它什么也没显示。当代码是动态的时，它不会加载 Twitter 时间线。

这是生成的标记：

<div class="card-body">
    <a data-height="500px" href="https://twitter.com/Google?ref_src=twsrc%5Etfw" class="twitter-timeline"></a>
</div>

我不知道出了什么问题，自过去 3 小时以来一直在尝试解决此问题，但似乎没有任何效果。

我想要完成的是：我有一些显示在页面上的过滤器来过滤页面上显示的产品。在移动设备中，我想将这些过滤器隐藏在一个按钮后面，一旦按下该按钮，就会在侧面滑出菜单中显示过滤器。

虽然我可以在页面上复制相同的组件两次，但组件不是完全相同的实例，即点击过滤器会触发该功能来过滤页面上的产品，但它设置了自己的数据属性，我我曾经说过“如果数据属性‘selected’为真，则向组件添加一个‘selected’类。当我调整窗口大小时，组件的另一个实例没有将‘selected’数据属性标记为‘true’ .

我期待这一点，因为，从文档：

请注意，当单击按钮时，每个按钮都保持自己的独立计数。这是因为每次使用组件时，都会创建它的一个新实例。

...但是最好的方法是什么？

我的想法是只在组件上设置一个“移动”类，而 .mobile css 会以不同的方式设置组件的样式，但我需要让它在嵌套的位置突破。

例如

<body>
   <header>
      <!-- desktop -->
      <guitar-filters>
   <header>

   <!-- mobile -->
   <guitar-filters>
</body

这是我的 Vue 组件“guitar-filters”，它显示了几个名为“instrument-filter”的组件：

Vue.component('guitar-filters', {

    data: function() {

        return {
            isMobile: false
        }

    },

    mounted: function() {

        var comp = this;
        this.setIsMobile();

        window.addEventListener('resize', function() {
            comp.setIsMobile();
        });

    },

    methods: {

        setIsMobile: function() {

            this.isMobile = (window.innerWidth <= 900) ? true : false;

        }

    },

    template: `
        <ul class="filters" :class="{mobile: isMobile}">

        <li>
            All
        </il>

        <li>
            Series
            <ul>
                <instrument-filter …