小编Tow*_*kir的帖子

我想访问具有该v-for指令的同一元素的另一个属性内的循环的当前索引。

HTML 内容是：

<div id="app">
    <div v-for="count in length" data-my-attribute="here" class="target">{{count}}</div>
</div>

和JS代码：

var app = new Vue({
    el : '#app',
    data: {
        length: 9,
    }
});

我知道我可以使用divclass访问当前循环索引“内部” target。它的方式与{{ count }}

但是是否可以访问count属性的内部值data-my-attribute？

（我的意思是代替“这里”这个词）

我试图在getUserMedia的帮助下访问iOS Safari上的麦克风.您可以在下面找到我的代码片段.

if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
}

if (navigator.mediaDevices.getUserMedia === undefined) {
  navigator.mediaDevices.getUserMedia = function(constraints) {
    // First get ahold of the legacy getUserMedia, if present
    let getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

    // Some browsers just don't implement it - return a rejected promise with an error
    // to keep a consistent interface
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }

    // Otherwise, wrap the call to the old …

注意:我需要使用纯javascript实现这一点,我知道.one()jquery中有一个方法可以做到这一点,但我需要在纯javascript中使用相同的输出.

场景:当用户滚动并到达页面的3/4部分或更多时,我试图调用一个函数,但是当用户到达那个部分时问题就出现了,我们都知道它们不能像素完美所以,之后满足条件,每个像素滚动执行该函数.

我希望只有在满足条件后执行,然后在页面底部添加一个部分,然后再次用户应该到达底部,函数应该只执行一次,依此类推......

片段:

var colors = ['skyblue', 'powderblue', 'lightgreen', 'indigo', 'coral'];

var addPage = function() {
  var page = document.createElement('div');
  page.classList.add('page');
  page.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  document.body.append(page);
  console.log('added a new page');
}

var scrollAndAdd = function() {
  if (window.scrollY < (window.innerHeight * (3 / 4))) {
    // execute addPage only once for each attempt; it's creating infinite pages
    addPage();
  }
}

window.addEventListener('scroll', scrollAndAdd);

* {
  margin: 0;
  padding: 0;
}

.page {
  height: …

我正在尝试创建此行为，并且不确定Gridstack是否支持它。我有3个Gridstack网格：Grid1，Grid2和Grid3。 Grid1是一个独立的网格，Grid3嵌套在Grid2内。我需要能够将小部件从Grid1拖动到Grid2（外部网格）和Grid3（嵌套网格）中。按照示例，我能够在2个顶级网格之间拖动小部件并创建一个嵌套网格，但不能将这2个网格组合在一起。如果支持，则不建议使用任何指针。

注意：将代码段扩展到全屏

$(document).ready(function() {
  $('.grid-stack').gridstack();
});

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

.grid-stack .grid-stack {
  /*margin: 0 -10px;*/
  background: rgba(255, 255, 255, 0.3);
}

.grid-stack .grid-stack .grid-stack-item-content {
  background: lightpink;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.css" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.jQueryUI.min.js'></script>


<div class="container-fluid">
  <h1> Multilevel …

我想将图像存储在 firebase 存储中并在 firestore 中传递其 URL 引用。因此，我可以在存储中上传图像，但无法在云 Firestore 中传递图像 URL 引用。

import React , {Component} from 'react';
import fire from './../fire'
import Uploadimg from './Uploadimg'

class Adproduct extends Component{

  geturl = (imurl) =>{
      this.setState({
          img:imurl
        });
  }
  submit = e =>{
      e.preventDefault()
      var db= fire.firestore();

      db.settings({
        timestampsInSnapshots: true
           });

      db.collection('newproducts').add(this.State)
      .then(res =>{
          console.log(res.id)

          this.props.submit()
      })
      .catch(err =>{
          console.log('something went wrong',err)
      })
  }
  takedata = e =>{
      this.setState({
          [e.target.name]: e.target.value 
      });
  }

  constructor(props){
      super(props);
      this.state ={
          name:'',
          productdetails:'',
          size:'',

      }
  } …

我刚刚使用npx create-react-app project-name，当我开始我的项目时，我收到此错误：

/src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/ index.css) BrowserslistError: 未知浏览器查询 android all。也许您正在使用旧的浏览器列表或在查询中输入错误。

Npm -v : 6.9.0
Node -v : v10.16.0
Windows 10 Pro

当您单击按钮并自动播放时，swiper 会在幻灯片中翻转，但当鼠标光标位于特定 swiper 上时不会停止。什么可能是错误？

PS Swiper 与 github。 https://github.com/nolimits4web/Swiper/blob/master/demos/280-autoplay.html

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

我正在尝试渲染我的网站，在 Google Chrome 中花费了很多时间，但在 Mozilla 中工作得很好。控制台显示错误

GET file://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic net::ERR_FILE_NOT_FOUND\n

我尝试在 CSS 和 HTML 中直接导入：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);\n\nbody {\n   font-family: \'Roboto\', sans-serif;\n}\n

但它仍然不起作用，它抛出同样的错误。

这是我的网站的完整 HTML 代码：

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset="utf-8"> </meta>\n        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></meta>\n        <title>Sign in</title>\n        <style>\n            @import url(\'https://fonts.googleapis.com/css?family=Roboto&display=swap\');\n        </style>\n        <!-- JQuery Mobile -->\n        <link rel="stylesheet" href="./jquery/jquery.mobile-1.4.5.css"></link>\n        <!-- Project CSS -->\n        <link rel="stylesheet" href="./css/style.css"></link>\n        <!-- NativeDroid2 CSS -->\n        <link rel="stylesheet" href="./bower_components/nativeDroid2/css/nativedroid2.css"></link>\n    </head>\n    <body>\n        <div data-role="main" class="ui-content">\n            <form method="post">\n                <div class="img-container">\n                    <img src="img/logo_gemott.png" …

对于圆环图类型，小数据不可见。我可以在不更改标签值的情况下调整它的大小吗？

我的图表选项：

options: {
    cutoutPercentage: 65,
    maintainAspectRatio: false,
    legend: {
        display: false
    },
    plugins: {
        datalabels: {
            display: false
        }
    },
    tooltips: {
        enabled: true,
        mode: 'nearest'
    },
     scales: {
        yAxes: [{
            ticks: {
                max: 5,
                min: 0,
                stepSize: 0.5
            }
        }]
    }

}

示例：http : //jsfiddle.net/Lkya2tqb/

我想通过以下代码生成v-for：

<div class="rating-container">
    <input type="radio" name="star" value="5" id="star-5">
    <label class="star-radio" for="star-5">5</label>
    <input type="radio" name="star" value="4" id="star-4">
    <label class="star-radio" for="star-4">4</label>
    <input type="radio" name="star" value="3" id="star-3">
    <label class="star-radio" for="star-3">3</label>
    <input type="radio" name="star" value="2" id="star-2">
    <label class="star-radio" for="star-2">2</label>
    <input type="radio" name="star" value="1" id="star-1">
    <label class="star-radio" for="star-1">1</label>
</div>

但我需要使它们保持相同的顺序，我的意思是，label在无线电input元素之后，我知道v-for标签input或label元素会首先生成所有inputs，然后生成所有labels

有没有办法用 vuejs 来做到这一点，v-for以便我可以保留元素顺序并用循环生成它们？

我有这个结果我的api调用的JSON数据,但是当我尝试访问属性"69106658_5"中的数据时,我无法得到"错误:未捕获的SyntaxError:无效或意外的令牌".我有一份我在下面的在线编辑器上运行的内容.我猜它是因为属性包含下划线.

let results=
    {
    "links": {
        "data": {
            "self": {
                "body": "",
                "content_type": "",
                "href": "/api/v2/nodes/69107289/categories",
                "method": "GET",
                "name": ""
            }
        }
    },
    "results": [
        {
            "data": {
                "categories": {
                    "58652374_10": [
                        "16",
                        "16.0.1",
                        "16.2",
                        "16.2.4"
                    ],
                    "58652374_11": [
                        "English"
                    ],
                    "58652374_12": [
                        "Windows"
                    ],
                    "58652374_13": "2018-11-20T00:00:00",
                    "58652374_2": "Published",
                    "58652374_3": "19",
                    "58652374_4": "Video",
                    "58652374_5": "65",
                    "58652374_6": "How To",
                    "58652374_7": [
                        "basic"
                    ],
                    "58652374_8": "237",
                    "58652374_9": "Content Server"
                }
            }
        },
        {
            "data": {
                "categories": {
                    "69106658_2": "You Tube",
                    "69106658_3": [ …

最近我做了这个教程。

在这个应用程序中，我可以成功运行 vuejs 应用程序和axios.then.catch.finally或this.form.then.catch.finally.

但是我在我最近升级到 Laravel 5.7 的旧项目中添加了 npm。在我的应用程序中，我无法添加finally功能。如果我这样做，它说：

未捕获的类型错误：axios.post(...).then(...).catch(...).finally 不是函数

我的 app.js：

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

// require('./bootstrap');
import Vue from 'vue'
window.Vue = Vue
window.axios = require('axios');
import { Form, HasError, AlertError } from 'vform'
window.Form = …