小编Gre*_*nov的帖子

是否可以在插槽上设置属性，并且父元素中的元素获取这些属性？

家长

<vDropdown>
  <button slot="button">new button</button>
  <ul>content</ul>
</vDropdown>

下拉菜单.vue

<div>
  <slot name="button" aria-haspopup="true">
    //fallback
    <button aria-haspopup="true">Default Button</button>
  </slot>
  <div id="name" :aria-expanded="expanded">
    <slot />
  </div>
</div>

按钮的输出没有任何属性......

<div>
  <button>new button</button>
  <div id="myDropdown" aria-expanded="false">
    <ul>content</ul>
  </div>
</div>

我用块助手创建了一个列表#each,但我不能将变量传递给我的每个循环中的部分.

{{#each a-z.letters}}
    {{this}} /*[1]*/
    <li class="list-inline__item">
        {{>button btn="btn-text" addClass='-large' link='letter/{{this}}' label='{{this}}'/*[2]*/}}
    </li>
{{/each}}

链接部分:

<a href="{{link}}" class="btn-text {{addClass}}">{{label}}</a>

输出是:

<ul class="list-inline">
    A /*[1]*/
    <li class="list-inline__item">
        <a href="letter/{{this}}/*[2]*/" class="btn-text -large">{{this}}/*[2]*/</a>
    </li>
    ....

[1]仅用于测试,它的工作原理

[2]如果我想将它传递到局部内部它不会渲染我的参数

UPDATE

所以这是我的助手,现在用网址扩展我的href.

Handlebars.registerHelper('updateLink', function(options){
    var insertAt = "href=";
    var content = options.fn(this).trim();
    var pos = content.indexOf(insertAt) + insertAt.length+1;  // +1 for the quotation marks
    content  = content.slice(0, pos) + options.hash.url + content.slice(pos, content.length);
    return new Handlebars.SafeString(content ); 
});

链接部分:

{{#updateLink url="letters/"}}
    {{>button link=this label=this …

是否可以通过html-webpack-plugin加载.json文件并将其传递给我的车把文件？

我目前的设定

const path = require('path');
const fs = require('fs');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

const extractCss = new ExtractTextPlugin({
  filename: './css/app.css'
});

const pages =  fs
    .readdirSync(path.resolve(__dirname, 'src/hbs/pages'))
    .filter(fileName => fileName.endsWith('.hbs'));

module.exports  = {
        context: path.resolve(__dirname, "src"),
        entry: './js/main.js',
        output: {
            path: path.resolve(__dirname, './build'),
            filename: 'js/app.js',
        },
        ...
        ...
        plugins: [
            new CleanWebpackPlugin(['build']),
            extractCss,
            ...pages.map(page => new HtmlWebpackPlugin({
                 template: 'hbs/pages/'+page,
                 filename: page
            }))
        ],

        module: {
            rules: [ …

我想上传一些文件，但是当我使用axios发布时，我的formdata在laravel中是一个空请求

vuejs：uploader.vue

filesChange(e) {
    const fileList = e.target.files;
    const formData = new FormData();
    if (!fileList.length) return;
    for (let i = 0; i < fileList.length; i += 1) {
      console.log(fileList[i]);
      formData.append('files', fileList[i], fileList[i].name);
    }
    this.save(formData);
  },

从控制台输出，所有文件都循环并附加到formData

save(formData) {
    photosApi.storePhotos(formData, this.galleryId).then((response) =>     {
        console.log(response);
    }).catch((error) => {
        console.log(error);
    });
},

vuejs：photosApi.js

storePhotos(formData, id) {
    return axios.post(`api/photo/${id}`, formData);
},

当我检查我的api调用时，我看到了

laravel：api.php

Route::post('/photo/{id}',  'PhotoController@store');

laravel：PhotoController.php

public function store(Request $request, $id)
{
    return $request->all(); 
}

我的回应只不过是空的...

我在做什么错？

当我尝试从属性调用方法时出现此错误:

_vm.url不是函数

当我试图调用一个函数

<a :href="url(item)" class="link">
    {{ item.label }}
</a>

method: {
    url: function(item) {
        console.log(item)
    }
}

我究竟做错了什么？

我想在nuxtjs中使用scrollmagic。

我通过npm安装了scrollmagic。

npm install scrollmagic

在我的nuxt.config.js文件中添加了

build: {
    vendor: ['scrollmagic']
},

在我的pages / index.vue文件中，我只是将其导入。

import ScrollMagic from 'scrollmagic'

但这只会导致此错误

[vue-router]无法解析异步组件默认值：ReferenceError：未定义窗口[vue-router]在路径导航期间未捕获的错误：ReferenceError：未在C：\ pathto \ node_modules \ scrollmagic \ scrollmagic \ uncompressed \ ScrollMagic定义窗口.js：37：2，位于C：\ pathto \ node_modules \ scrollmagic \ scrollmagic \ uncompressed \ ScrollMagic.js：22：20，位于Object。（C：\ pathto \ node_modules \ scrollmagic \ scrollmagic \ uncompressed \ ScrollMagic.js：27：2）

我怎样才能解决这个问题？

是否有任何库可以接受 dom 元素并返回带有 vanilla css 的字符串，以便在 web 项目中使用？

const styles = TailwindToStyles('<div class="bg-teal-100 m-10">Lorem ipsum</div> ')

样式的结果是

.bg-teall-100 {
  background-color: #e6fffa;
}
.m-10{
  margin: 40px
}

格雷戈尔