标签: nuxt

让我简化一下这个问题:

我的Vue.js模板中有一个复选框(使用Vuetify组件):

<v-checkbox 
   v-model="selected" 
   label="John"
   value="John"
   id ="john" 
   @click.native="checkit">
</v-checkbox> 

该checkit()方法的代码是:

checkit: function() {
  let elt = document.getElementById('john')
  if(elt.checked) {
    console.log('checked')
  } else {
    console.log('unchecked')
  }
}

但是我得到了相反的结果:当它被检查时它表示未经检查,反之亦然.

是什么导致这种情况以及如何解决？

Codepen演示

我以推荐的方式安装了Nuxt入门模板：

npx create-nuxt-app fffff

进入内部后，fffff我安装了css-loder（npm install --save-dev css-loader），然后启动了服务器：npm run dev

我收到此错误消息：

> fffff@1.0.0 dev /home/begueradj/fffff
> nuxt



 INFO  Building project

? success Builder initialized
? success Nuxt files generated


 ERROR  Failed to compile with 1 errors                                                                                                                         22:09:09

 error  in ./layouts/default.vue

Module Error (from ./node_modules/eslint-loader/index.js):

/home/begueradj/fffff/layouts/default.vue
   89:1  error  Delete `··`                           prettier/prettier
   90:3  error  Delete `··`                           prettier/prettier
   91:1  error  Replace `······` with `····`          prettier/prettier
   92:1  error  Delete `··`                           prettier/prettier
   93:1  error  Replace `········` with `······` …

我尝试$navbar-height通过Nuxt组件中的安装函数来更改的值。到目前为止，除覆盖布尔玛变量外，其他所有东西都在工作

我在Nuxt配置中添加了布尔玛：

modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    // Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
    '@nuxtjs/bulma',
    '@nuxtjs/font-awesome'
  ]

并更改了main.scss文件中的一些变量：

@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/mixins';
@import '~bulma/sass/utilities/functions';

$primary: #3dccc8;
$danger: #dc5222;
$navbar-height: 5rem;
$navbar-item-img-max-height: 3rem;

@import '~bulma/bulma';

该main.scss也得到了加入Nuxt配置

css: [
    { src: '~assets/css/main.scss', lang: 'scss' }
  ],

I now try to manipulate the Variable in a component, but nothing happens.

Here is the function:

mounted() {
    this.$nextTick(function(){
      window.addEventListener("scroll", function(){
        var navbar = document.getElementById("nav")
        var nav_classes = navbar.classList
        if(document.documentElement.scrollTop >= 10) { …

我的代码是这个。
但是，在此代码中，当时，“ /”不会成为活动类domain.com/?standalone=true。

<nuxt-link to="/" class="navBotton" exact-active-class="active" ><span>Home</span>
</nuxt-link>
<nuxt-link to="/post" class="navBotton" active-class="active" ><span>Post</span>
</nuxt-link>
<nuxt-link to="/about" class="navBotton" active-class="active" ><span>About</span>
</nuxt-link>

我如何解决它？

当我删除精确时，它在所有页面上都变为活动类。

谢谢你的回答。

我找到了一种激活“ /”参数的方法。这是代码。

<nuxt-link
        to="/"
        class="navBotton home"
        :class="{'active': isRouteActive }"
        exact-active-class="active"
      >

computed: {
    isRouteActive: function() {
      if (this.$nuxt.$route.path=="/") {
        return true;
      } else {
        return false;
      }
    }
  }