小编Max*_*huk的帖子

Vue.JS值与具有焦点的输入相关联

当输入获得/失去焦点时,有没有办法在模型中更改值?

此处的用例是一个搜索输入,在您键入时显示结果,这些只应在焦点位于搜索框时显示.

这是我到目前为止所拥有的:

<input type="search" v-model="query">
<div class="results-as-you-type" v-if="magic_flag"> ... </div>
Run Code Online (Sandbox Code Playgroud)

然后,

new Vue({
  el: '#search_wrapper',
  data: {
    query: '',
    magic_flag: false
  }
});
Run Code Online (Sandbox Code Playgroud)

这里的想法magic_flag应该是true在搜索框具有焦点时转向.我可以手动执行此操作(例如,使用jQuery),但我想要一个纯粹的Vue.JS解决方案.

onfocus vue.js

37
推荐指数
2
解决办法
5万
查看次数

SPA中的Google DFP广告管理系统(Angular,Vue) - 如何销毁广告及其所有引用以避免内存泄漏

我试图在两者Vue.jsAngularSPA中使用谷歌的DFP,但它似乎导致内存泄漏.

在Angular中,您可以看到概念验证https://github.com/jbojcic1/angular-dfp-memory-leak-proof-of-concept.对于广告,我使用的是ngx-dfp npm包(https://github.com/atwwei/ngx-dfp).要重现拉动并运行概念证明项目,请转到主页,该主页最初将在Feed中包含3个广告,并执行堆快照.之后,通过使用标题中的链接转到没有广告的页面,再次执行堆快照,您将看到在销毁插槽之后保留插槽引用,这会导致内存泄漏.

在Vue中,我有一个创建和销毁广告位的组件,我会在内容Feed中动态添加它们.当我离开页面时,组件被销毁,并且在beforeDestroy钩子中,我调用destroySlots,但似乎有些引用仍在那里.

这是我的dfp-ad组件:

<template>
  <div :id="id" class="ad" ref="adContainer"></div>
</template>

<script>
  export default {
    name: 'dfp-ad',
    props: {
      id: { type: String, default: null },
      adName: { type: String, default: null },
      forceSafeFrame: { type: Boolean, default: false },
      safeFrameConfig: { type: String, default: null },
      recreateOnRouteChange: { type: Boolean, default: true },
      collapseIfEmpty: { type: Boolean, default: true },
      sizes: { type: …
Run Code Online (Sandbox Code Playgroud)

google-dfp vue.js gpt vuejs2 angular

22
推荐指数
1
解决办法
1791
查看次数

VueJS和Firebase,刷新时的历史模式404错误

我在路由器文件中删除了历史模式链接中的hashbang.现在,当我刷新页面时,我收到了404错误.

我试着按照这个链接

然后,我在firebase.json中添加了部分:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
Run Code Online (Sandbox Code Playgroud)

然而一切都没有改变.

我不明白为什么我还有这个错误.我尝试了很多东西,但我找不到解决它的东西.

这是我的路由器文件:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/catalog'
    },
    {
      path: '/catalog',
      name: 'Catalog',
      component: Catalog
    },
    {
      path: '/catalog/category/:category',
      name: 'ProductsList',
      component: ProductsList
    },
    {
      path: '/catalog/category/:category/product/:id',
      name: 'ProductDetail',
      component: ProductDetail,
    },
    {
      path: '/catalog/category/:category/product/create',
      name: 'CreateProduct',
      component: CreateProduct
    }
  ]
});
Run Code Online (Sandbox Code Playgroud)

http-status-code-404 firebase vue.js vuejs2 vuefire

8
推荐指数
1
解决办法
1312
查看次数

如何在vuejs中将数组值从一个函数传递给另一个函数?

我试图从" validateBeforeSubmit"函数到" saveForm "函数获取数组值.但我在" undefined"中得到" "的值arrlength.请帮我解决.

这是我在vue.js中的代码

export default {
  name: '',
  data() {
    return {}
  },
  ready: function() {
    this.validateBeforeSubmit()
    this.saveForm();
  },
  methods: {
    validateBeforeSubmit() {
      var fieldsVal = new Array();
      var firstName = document.getElementById('firstName').value
      var lastName = document.getElementById('lastName').value
      var designation = document.getElementById('designation').value

      if (firstName != "" && lastName != "" && designation != "") {
        fieldsVal.push(firstName);
        fieldsVal.push(lastName);
        fieldsVal.push(designation);
        return fieldsVal;
      } else {
        fieldsVal.length = 0;
        return fieldsVal;
      }
      return fieldsVal;
    },

    saveForm() { …
Run Code Online (Sandbox Code Playgroud)

vue.js vuejs2

0
推荐指数
1
解决办法
1043
查看次数