小编wra*_*him的帖子

我有一个使用webpack-simple选项生成的Vue应用程序.我正在尝试发出GET请求,https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en但我收到错误:

XMLHttpRequest无法加载 https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.http://127.0.0.1:8080因此,不允许访问" 来源" .

我正在使用vue-resource并添加了:

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'

那没有效果.

我还在以下devServer选项中添加了这个webpack.config.js:

devServer: {
  historyApiFallback: true,
  noInfo: true,
  headers: {
    "Access-Control-Allow-Origin": "*"
  }
}

这也不能解决问题; 错误消息保持不变.

如何解决这个问题？

我有一个Vue.js单页面应用程序,其中有一个<router-view/>用于呈现不同页面的主导航栏.

像这样的东西:

<main-header/> <!-- navigation links -->
<transition name="slide-fade" mode="out-in">
  <router-view/> <!-- different pages -->
</transition>

在其中一个页面中,我有一个侧栏,它有更多的导航链接(<router-link/>就像主导航栏一样.

像这样的东西:

<sidebar/> <!-- navigation links -->
<div class="content">
  <transition name="slide-fade" mode="out-in">
    <router-view/> <!-- content beside the sidebar -->
  </transition>
</div>

当我单击侧边栏导航链接时,我希望侧边栏旁边的内容以及要更改的URL更改.但是,我丢失了侧边栏,只是获取要在内容部分中呈现的组件.

我如何达到预期的效果？如何<router-view/>在其他组件中使用多个s,如上例所示？

我有一个 vue 应用程序，其中使用 vue-router 导航页面。

我的app.vue很简单：

<template>
  <div id="app">
    <main-header/>
    <router-view/>
  </div>
</template>

<script>...</script>
<style>...</style>

页面使用 vue-router 渲染：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/page1',
      name: 'Page1',
      component: Page1
    }, {
      path: '/page2',
      name: 'Page2',
      component: Page2
    }
  ]
})

现在使用应用程序的网址是

localhost:8080/#/      -> Home
localhost:8080/#/page1 -> Page1
localhost:8080/#/page2 -> Page2

问题：我想创建另一个Login.vue未由 vue-router 使用的页面，并按如下方式访问：localhost:8080/或者localhost:8080/login，在成功身份验证后，它会返回到默认 url 路由，如上所述。例如，当localhost:8080/login没有App.vue渲染时，这可能吗？

我该怎么做呢？

这是一种反模式吗？

export function Todo() {
    ...

    const renderItem = (item) => (
        item.done
            ? <strike>{item.text}</strike>
            : <span>{item.text}</span>
    );

    return (
        <ul>
            {items.map((item) => <li>renderItems(item)</li>)}
        </ul>
    );
}

与在 Todo 中创建 Item 组件相比，渲染这样的项目有什么区别，如下所示：

export function Todo() {
    ...

    const Item = (props) => (
        props.item.done
            ? <strike>{item.text}</strike>
            : <span>{item.text}</span>
    );

    return (
        <ul>
            {items.map((item) => <li><Item item={item} /></li>)}
        </ul>
    );
}

编辑：

在本地创建被调用一次的组件/渲染函数怎么样？

export function SomeForm(props) {
    const renderButton = (isComplete) => (
        isComplete
            ? <button>Submit</button>
            : <button disabled>Please complete</button>
    ); …

我v-for用来渲染基于对象数组的列表.

<ul>
  <li v-for="category, i in categories"
  :class="{active: category.active}"
  @click="changeCategory(i)">
    <a>{{ category.service_type_name }}</a>
  </li>
</ul>

单击列表项changeCategory(index)运行时:

changeCategory(index) {
    this.categories.forEach((c, i) => {
        c.active = (i != index)? false : true
    })
}

因此,单击的列表项active属性将设置为true,所有其他属性设置为false,并且列表项将.active添加一个类(由于:class="{active: category.active}"模板中的行.

但是,DOM未更新以显示此更改.

无论如何在发生此更改时自动更新DOM,而不this.$forceUpdate()在changeCategory(index)函数中使用？

编辑:更改map为forEach,DOM仍然不更新.

编辑:我正在使用带有打字稿的vue-class-components

import Vue from 'app/vueExt'
import { Component } from 'vue-property-decorator'
import * as Template from './services.vue'

@Component({
    mixins: [Template]
}) …

当您使用 Vue CLI 3.0 生成应用程序并选择 PWA 支持时。它生成一个public/manifest.json文件。但是，这些设置不会在元标记中使用，例如更改文件中的主题颜色manifest.json不会更改<meta name="theme-color" ...>标记。

要配置它，您必须遵循自述文件@vue/cli-plugin-pwa并在文件中添加选项vue.config.js。

那么这个manifest.json文件有什么用呢？