小编use*_*142的帖子

我有一个只有一页的基本 VueJS 应用程序。它不是 SPA，我也不使用 vue-router。

我想实现一个按钮，当单击该按钮时，它会使用来自我的 Vue 组件之一的内容执行 window.open() 函数。

查看文档，window.open()我看到了以下 URL 声明：

URL 接受指向 HTML 页面、图像文件或浏览器支持的任何其他资源的路径或 URL。

是否可以将组件作为参数传递给window.open()？

我正在尝试使用来自v-model的道具的数据,以下代码可以正常工作,但有警告.

<template>
<div>
       <b-form-input v-model="value" @change="postPost()"></b-form-input>
</div>
</template>
<script>
    import axios from 'axios';
    export default {
        props: {
            value: String
        },
        methods: {
            postPost() {
                axios.put('/trajectory/inclination', {
                    body: this.value
                })
                    .then(response => {
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })
            }
        }
    }
</script>

警告说:

"避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖.而是根据道具的值使用数据或计算属性.支持变异:"值"

所以我改变了,现在我正在使用数据,因为警告说.

<template>
<div>
       <b-form-input v-model="_value" @change="postPost()"></b-form-input>
</div>
</template>
<script>
    import axios from 'axios';

    export default {
        props: {
            value: String
        },
        data() {
            return {
                _value: this.value
            }
        },
        methods: {
            postPost() {
                axios.put('/trajectory/inclination', { …

我想要一个网格布局，其中前四个元素的宽度等于 300px，同时保持其他元素不同的宽度值（确切地说是 200px）：

基本上，我试图通过声明grid-template-columns两次来解决这个问题，如下代码所示：

  grid-template-columns: repeat(auto-fit, 200px);

  grid-template-columns:nth-child(-n+4){
       grid-template-columns: repeat(4, 300px);

但这不起作用。

网格布局是执行此操作的正确方法吗？我可以使用 Flexbox 和网格布局获得相同的结果吗？

这是 CodePen 到目前为止我的进展https://codepen.io/williamjamir/pen/GQYqrK

.container {
  width: 100%;
  margin: auto;
  background-color: #ddd;
  display: grid;
  justify-content: center;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, 100px);
}
@media screen and (min-width: 400px) {
  .container {
    grid-template-columns: repeat(auto-fit, 200px);
  }
  .container .container:nth-child(-n + 4) {
    grid-template-columns: repeat(4, 300px);
  }
}
.container .item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  background-color: orangered;
}
.container .item--1 {
  background-color: orangered; …

我正在尝试使用 webpack 和 Vue.js 运行 plotly.js

对于像 scatter 这样的简单图，它可以通过以下配置正常工作：

在 webpack.config.js 上

loaders: [
        {
            test: /node_modules/,
            loader: 'ify-loader'
        },

    ],

在 vue 文件中，我使用以下代码导入：

var Plotly = require('plotly.js/lib/core');
Plotly.register([
    require('plotly.js/lib/scatter'),
    require('plotly.js/lib/scatter3d'),
]);

使用 scatter 一切正常，但是当我尝试使用时：

type: 'scatter3d',

我收到以下错误：

It appears that you're using glslify in browserify without its transform applied. Make sure that you've set up glslify as a source transform:

所以根据我的理解，除了 node_modules 之外，我还需要让 ify-loader 处理我的文件项目。

我已经尝试按照文档的 GitHub 自述链接上的建议在我的项目中插入转换，但两个测试都不起作用（使用 .js 和 .vue）：

使用 .js

    loaders: [ …