Survey.StylesManager.applyTheme("modern");
var json = {
"elements": [
{
"type": "checkbox",
"name": "car",
"title": "What cars have you being drived?",
"isRequired": true,
"colCount": 3,
"choices": [
"Audi",
"BMW",
"Citroen",
"Ford",
"Mercedes-Benz",
"Nissan",
"Peugeot",
"Tesla",
"Toyota",
"Vauxhall",
"Volkswagen"
]
},
{
"type": "checkbox",
"name": "categories",
"title": "What categories could you rate?",
"isRequired": true,
"colCount": 3,
"choices": [
"Style",
"Performance",
"Comfort",
"Quality",
"Safety",
"Features"
]
},
{
"type": "matrix",
"name": "carRating",
"isRequired": true,
"visibleIf": "{car.length} > 0 and {categories.length} > 0",
"title": "Please select best car for each category?",
"rowsVisibleIf": "{categories} contains {item}",
"columnsVisibleIf": "{car} contains {item}",
"rows": [
"Style",
"Performance",
"Comfort",
"Quality",
"Safety",
"Features"
],
"columns": [
"Ford",
"Vauxhall",
"Volkswagen",
"Nissan",
"Audi",
"Mercedes-Benz",
"BMW",
"Peugeot",
"Toyota",
"Citroen",
"Tesla"
]
}
]
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
survey.data = { 'car': ['Ford','BMW','Mercedes-Benz'],'categories': ['Style', 'Performance']};
var app = new Vue({
el: '#surveyElement',
data:
{
survey: survey
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Show/Hide columns/rows in matrix question, Vue Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="/DevBuilds/survey-core/survey.core.min.js"></script>
<script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
<script src="/DevBuilds/survey-vue-ui/survey-vue-ui.min.js"></script>
<link href="/DevBuilds/survey-core/modern.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
</head>
<body style="margin: 0">
<div id="surveyElement" style="display:inline-block;width:100%;">
<survey :survey='survey' />
</div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
You may use expression properties:
The following expression below means: the item is shown if, the same value is checked in the {car} question and it is not selected in the {bestcar} question.
{car} contains {item} and {item}!= {bestcar}
Every ItemValue object has its own visibleIf property. You may override the top level choicesVisibleIf property and define visibleIf expression for an individual choice item.
Help us serve you better by taking this brief
survey. We are interested to learn more about
your experience of using our libraries.
We'd really appreciate your feedback.
Approximate time to complete: 2 min.
Start the survey