---
title: Change Question Visibility
product: Form Library
description: Make sure respondents only see questions relevant to them by using the visibleIf property that allows you to make questions visible or invisible based on preconfigured conditions. View a free demo for JavaScript to learn more.
framework: Vue 3
source: https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/vue3js
index: https://surveyjs.io/form-library/examples/overview.md
---

# Change Question Visibility (Vue 3)

SurveyJS Form Library allows you to show or hide any survey element based on certain criteria, for example, the response to the current question. With this capability, you can implement skip logic and branching in your survey.

To conditionally change the visibility of a survey page, panel, or question, specify its [`visibleIf`](/form-library/documentation/api-reference/question#visibleIf) property. It accepts a Boolean [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions). The survey element becomes visible when this expression evaluates to `true`. In this demo, a survey displays additional questions depending on the value you select in the NPS question. Refer to the following help topic for more information: [Conditional Visibility](/form-library/documentation/design-survey/conditional-logic#conditional-visibility).

## Files

### `public/index.html`

```html
<div id="app" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; height:100%"></div>
```

### `src/App.vue`

```html
<template>
    <SurveyComponent :model="survey" />
</template>
<script setup lang="ts">
    import { Model } from "survey-core";
    import { SurveyComponent } from "survey-vue3-ui";
    import "survey-core/survey-core.min.css";
    import "./index.css";
    import { json } from "./json";

    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
</script>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/json.ts`

```ts
export const json = {
  "title": "NPS Survey Question",
  "logo": "https://api.surveyjs.io/private/Surveys/files?name=bdf16c7e-fa1e-4e31-9d82-a6df1982c224",
  "logoWidth": "200px",
  "logoHeight": "80px",
  "logoFit": "cover",
  "logoPosition": "right",
  "elements": [
    {
      "type": "rating",
      "name": "nps-score",
      "title": "On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?",
      "rateMin": 0,
      "rateMax": 10,
      "minRateDescription": "Very unlikely",
      "maxRateDescription": "Very likely"
    },
    {
      "type": "comment",
      "name": "disappointing-experience",
      "visibleIf": "{nps-score} <= 5",
      "title": "How did we disappoint you and what can we do to make things right?",
      "maxLength": 300
    },
    {
      "type": "comment",
      "name": "improvements-required",
      "visibleIf": "{nps-score} >= 6",
      "title": "What can we do to make your experience more satisfying?",
      "maxLength": 300
    },
    {
      "type": "checkbox",
      "name": "promoter-features",
      "visibleIf": "{nps-score} >= 9",
      "title": "Which of the following features do you value the most?",
      "description": "Please select no more than three features.",
      "isRequired": true,
      "choices": [
        {
          "value": "performance",
          "text": "Performance"
        },
        {
          "value": "stability",
          "text": "Stability"
        },
        {
          "value": "ui",
          "text": "User interface"
        },
        {
          "value": "complete-functionality",
          "text": "Complete functionality"
        },
        {
          "value": "learning-materials",
          "text": "Learning materials (documentation, demos, code examples)"
        },
        {
          "value": "support",
          "text": "Quality support"
        }
      ],
      "showOtherItem": true,
      "otherPlaceholder": "Please specify...",
      "otherText": "Other features",
      "colCount": 2,
      "maxSelectedChoices": 3
    }
  ]
};
```

### `src/main.ts`

```ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
```

### `src/shims-vue.d.ts`

```ts
/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

### `src/theme.ts`

```ts
export const themeJson = {};
```

### `.eslintrc.js`

```js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};
```

### `babel.config.js`

```js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
```

### `package.json`

```json
{
  "name": "surveyjs-library-vue3",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "tslib": "2.6.1",
    "vue": "^3.4.1",
    "survey-core": "latest",
    "survey-vue3-ui": "latest",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}
```

### `tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/angular.md)
- [React](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/reactjs.md)
- [jQuery](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/vanillajs.md)