Почему не переходит на другой компонент?

Question

[fostsinger]

<div class="box_profile">
      <div class="box_left">
        <a href="#">Settings</a>
        <a href="#" @click="switchActive('users')">Users</a>
        <a href="#"   @click="switchActive('history')" class="active">History</a> </div>
      <div class="box_right">
<components :is="users"> </components>

<script>
import users from "~/components/users.vue"
  import history from "~/components/history.vue"
 components: {
        users,
        history
      },
      data() {
        return {
          active: 'users',

        }
      },
methods: {
        switchActive: function(view) {
          this.active = view;
          console.log("ok")
        }
      },
    }
</script>

выводит ошибку
Property or method "users" is not defined on the instance but referenced during render.

Answer 1

[Сергей delphinpro]

вероятно опечатка здесь

<components :is="users"> </components>
<components :is="active"> </components>

Пример jsfiddle.net/4813uLdj

.

Comments

[fostsinger]

в этом была ошибка. все равно не переключает компонент хотя функция срабатывает

[Сергей delphinpro]

fostsinger, обновил ответ

[fostsinger]

Сергей delphinpro, я использую nuxt

[fostsinger]

fostsinger, components: {
users,
history
},

[Сергей delphinpro]

fostsinger, а какая разница? суть не маеняется.

[Сергей delphinpro]

fostsinger, jsfiddle.net/4813uLdj/1

[fostsinger]

Сергей delphinpro, у меня нет template , просто отдельные компоненты

[fostsinger]

Сергей delphinpro, данные которые в компоненте нужно отобразить по клику

[Сергей delphinpro]

fostsinger, на jsfiddle нельзя написать
import users from './users';
поэтому для пример там компоненты так определены.
только и всего.