---
title: Property Dependencies
product: Survey Creator
description: Learn how to introduce property dependencies to survey elements and make one property of a question change its behavior depending on how the master property is configured. View a free demo for JavaScript.
framework: Vue 3
source: https://surveyjs.io/survey-creator/examples/configure-property-dependencies/vue3js
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Property Dependencies (Vue 3)

Survey Creator allows survey element properties to change their behavior and visibility depending on the values of other properties. This demo illustrates how this functionality enables you to fill choices and control property visibility based on certain conditions.

To see this functionality in action, do the following:

- Conditional choices        
In the Property Grid, ensure that **Survey** is selected in the element selector and expand the Geo Location section. Change the "Region" property value and open the "Country" property editor. You should see that its choice list is filtered based on the selected region.

- Conditional visibility        
In the Property Grid, select **question1** from the element selector. Change the "Input type" property value to `date`, `datetime`, or `datetime-local`. You should see that the "Date format" property becomes visible. If you select another input type, "Date format" will be hidden.

To establish a dependency between properties, specify the `dependsOn` option for a dependent property. This option accepts an array of property names upon which the current property depends. When one of the listed properties changes, the dependent property reevaluates its `visibleIf` and `choices` functions. This behavior allows you to control the property visibility and fill choices conditionally. Refer to the following help topic for more information on how to configure custom survey element properties: [Add Custom Properties to the Property Grid](https://surveyjs.io/survey-creator/documentation/property-grid#add-custom-properties-to-the-property-grid).

## Files

### `public/index.html`

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

### `src/App.vue`

```html
<template>
    <SurveyCreatorComponent :model="creator" />
</template>
<script setup lang="ts">
    import { SurveyCreatorModel } from "survey-creator-core";
    import { SurveyCreatorComponent } from "survey-creator-vue";
    import { Serializer } from "survey-core";
    import "survey-core/survey.i18n";
    import "survey-creator-core/survey-creator-core.i18n";
    import "survey-core/survey-core.css";
    import "survey-creator-core/survey-creator-core.css";
    import "./index.css";
    import SurveyTheme from "survey-core/themes";
    import { registerCreatorTheme } from "survey-creator-core";

    registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

    Serializer.addProperty("survey", {
      name: "region",
      category: "Geo Location",
      categoryIndex: 1,
      choices: ["Africa", "Americas", "Asia", "Europe", "Oceania"],
    });
    
    Serializer.addProperty("survey", {
      name: "country",
      category: "Geo Location",
      dependsOn: [ "region" ],
      // Populate countries depending on the selected region
      choices: function (obj, choicesCallback) {
        if (!choicesCallback)
          return;
        const xhr = new XMLHttpRequest();
        const url = !!obj && !!obj.region
          ? "https://surveyjs.io/api/CountriesExample?region=" + obj.region
          : "https://surveyjs.io/api/CountriesExample";
        xhr.open("GET", url);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onload = function () {
          if (xhr.status === 200) {
            const response = JSON.parse(xhr.response);
            const result = [];
            result.push({ value: null });
            for (let i = 0; i < response.length; i++) {
              const item = response[i];
              const val = item.cioc;
              result.push({ value: val, text: item.name });
            }
            choicesCallback(result);
          }
        };
        xhr.send();
      }
    });
    
    Serializer.addProperty("text", {
      name: "dateFormat",
      dependsOn: [ "inputType" ],
      // Display "Date format" only if `inputType` is one of date types
      visibleIf: function(obj) {
        return (
          obj.inputType === "date" ||
          obj.inputType === "datetime" ||
          obj.inputType === "datetime-local"
        );
      },
      category: "general",
      visibleIndex: 7
    });
    const creator = new SurveyCreatorModel();
    creator.JSON = {
     "pages": [
      {
       "name": "page1",
       "elements": [
        {
         "type": "text",
         "name": "question1"
        }
       ]
      }
     ]
    }
    creator.collapseAllPropertyGridCategories();
    creator.expandPropertyGridCategory("Geo Location");
    creator.showSidebar = true;
</script>
```

### `src/index.css`

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

### `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
}
```

### `.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",
    "survey-creator-core": "latest",
    "survey-creator-vue": "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/survey-creator/examples/configure-property-dependencies/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/configure-property-dependencies/reactjs.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/configure-property-dependencies/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/configure-property-dependencies/vanillajs.md)